删除网页中的白色间距 - CSS 960.gs

Question

我正在从头开始开发我的投资组合网站.我已经读过一个名为"960.gs"的CSS框架,我使用过类似的东西,但之前我从未使用过CSS-pure框架,所以我自然有点生疏了.

无论如何,这是我的网站.我想删除顶部有"标题"的两段之间的白色间距.我不确定是什么导致它,因为,诚然,我的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

只需使用框架来构建主要布局(列等).例

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

而且似乎你的CSS没有为grid_3或grid_9提供宽度