Удалить белый интервал на веб-странице - CSS 960.gs

Question

Я сейчас разрабатываю свой портфолио с нуля. Я читал о структуре CSS под названием «960.gs», я использовал подобные вещи, но я никогда не использовал CSS-чистую структуру, прежде чем я, естественно, немного ржавый.

В любом случае, вот мой сайт. Я хочу удалить белый интервал между двумя абзацами, которые имеют «Заголовок» вверху. Я не уверен, что вызывает его, потому что, по общему признанию, мой CSS тоже немного ржавый.

Любые решения будут оценены.

Мой 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> 

Мой CSS (очень мало, на данный момент):

@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 (код, который активен):

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

Просто используйте рамки для построения основного макета (столбцы и т. Д.). Example

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

И, кажется, ваш CSS не обеспечивает ширину для grid_3 или grid_9

Answer 2

Измените правый столбец так, чтобы он плавал вправо, и он должен выглядеть лучше.

aside.grid_3 { 
    float:right ; 
} 

Answer 3

Кажется, ваш CSS не предоставляет ширину для grid_3 или grid_9. Также вы не указываете, что хотите поместить свой <aside> вправо где угодно (по крайней мере, я вижу)

Установите ширину, like this fiddle here and it should function соответственно.

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;} 

Это должно быть хорошей отправной точкой.