966グリッドの左と右の余白を取り除くにはどうすればいいですか？

Question

ビューポートサイズが784 x 741の場合、取り除きたいボックスに左右の余白が適用されます。私はトップの "ホワイトスペース"を取り除く方法を知っていますが、それは "私が取り除くことができない側の白いスペースです。誰もヘッダーが全幅に伸びるように空白を取り除く方法を知っていますか？あなたが欲しい（またはmargin: 0;プロパティを追加することによって、それらを削除）任意の値に任意のメディアクエリーのための余白を変更することができますように、ブラウザのビューポートの？私のcodepenは以下の通りです。

codepen

<div class="container"> 
    <div class="grid_12"> 
     <header> 
      <nav> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About</a><li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 
      <h1>ALIEN</h1> 
     </header> 
    </div> 
</div> 

Answer 1

あなたが画面のヘッダー全幅を作るための最も簡単な方法を検索する場合は、（のは、例えば「全角」それを呼びましょう）2つのdiv要素に別の1つのクラスを追加する必要があります。その結果、このようなものでなければなりません：

Htmlの

<div class="container full-width"> 
    <div class="grid_12 full-width"> 
    <!-- another code --> 
    </div> 
</div> 

このクラスは、すべてパディング/マージンと設定幅に100％にリセットされます

.full-width { 
    width: 100% !important; 
    margin-left: 0 !important; 
    margin-right: 0 !important; 
    padding-left: 0 !important; 
    padding-right: 0 !important; 
} 

のCssこのクラスのすべての（またはほぼすべての）要素に対してこの後、わずかなマージン（8px）が残り、これはbody要素のマージンです。あなたはあまりにもそれらを取り除くしたい場合は、ちょうどあなたのCSSでこのコードを含める：

body { 
    margin-left: 0; 
    margin-right: 0; 
} 

これは、別のCSSをたくさん壊してはならない簡単な方法です。しかし、あなたがプロパティを変更すべきか迷っている場合（あなたはを手動それらを変更する代わりに、私たちの「全角」クラスを追加することができます）、顔をしている：

あなたがラインに105および106を変更することができます、

margin-left: 0; 
margin-right: 0; 

から221と222はまた、ラインと

にパディングをリセットする必要があります

width: 100% !important;をcontainerとgrid_12divに設定することを忘れないでください。残りのCSSを壊さないために、新しいクラス（クラス）を追加してください。

Answer 2

に見えます。すべての要素の余白をクリアしたい場合は、* {margin: 0;}をCSSの上部に貼り付けてください（その場合は、*はすべての要素を選択します）。

また、margin-top,、margin-bottomおよびmargin-leftのプロパティを別々に変更することもできます。 任意のメディアクエリを選択し、それに対してmarginプロパティを上書きします。 これで問題が解決しない場合は、 の位置との幅をの要素で変更する必要があります。