Remove white spacing in webpage - CSS 960.gs

Question

I'm currently developing my portfolio website from the ground up. I've read about a CSS framework called "960.gs", I've used similar things but I've never used a CSS-pure framework before so naturally I'm a bit rusty.

Anyways, here is my website. I want to remove the white spacing between the two paragraphs that have "Title" at the top. I'm not sure what is causing it because, admittedly, my CSS is also a bit rusty.

Any solutions would be appreciated.

My HTML:

<section class="container_12">
    <article class="grid_9">
        <h1>Title</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>

    <aside class="grid_3 ">
        <h1>More</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </aside>    

    <article class="grid_9">
        <h1>Title</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>

    <article class="grid_9">
        <h1>Title</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>
</section>

My CSS (very little, at this point):

@import url("nav.css");
@import url("960.css");

body {

}

a {
    font-family:arial;
}

h1 {

}

h2 {

}

h3 {

}

h4 {

}

h5 {

}

/* MAIN CONTENT */

* {

}

.container {
    margin:0 auto;
    max-width:1100px;
    width:90%;
}

960.gs CSS (code that is active):

body {
  min-width: 960px;
}

/* `Container
----------------------------------------------------------------------------------------------------*/

.container_12,
.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
  width: 60px;
}

.container_12 .grid_2 {
  width: 140px;
}

.container_12 .grid_4 {
  width: 300px;
}

.container_12 .grid_5 {
  width: 380px;
}

.container_12 .grid_7 {
  width: 540px;
}

.container_12 .grid_8 {
  width: 620px;
}

.container_12 .grid_10 {
  width: 780px;
}

.container_12 .grid_11 {
  width: 860px;
}

Answer 1

Just use framework for building main layout (columns, etc.). Example

<main class="container_12">
  <div id="main-column" class="grid_9">
    ...
  </div>
  <aside class="grid_3">
    ...
  </aside>
</main>

And it seems your CSS is not providing width for grid_3 or grid_9

Answer 2

Change the right column to that it floats right and it should look better.

aside.grid_3 {
    float:right ;
}

Answer 3

Seems your CSS is not providing width for grid_3 or grid_9. Also you aren't specifying that you want to float your <aside> to the right anywhere, (at least that i can see)

Set a width, like this fiddle here and it should function accordingly.

body {
    width: 100%;
    max-width: 960px;
}

aside {float:right; width:30%; max-width: 300px;}
article {float:left; width:60%; max-width: 600px;}
.clear {clear:both;}

That should be a good starting point.