2017-05-24 5 views
-1

なぜ私のコードが10pxのほぼゴーストマージンを追加しているのか知りたいのですが?私が何をしても、.wrapperとそのすべてがマージンの右側の10pxを無視しているようです。負のマージン - 動作していません

***は、私が最初に全部が境界ボックスここ

あるコードだということを言及するのを忘れてしまった:

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.container{ 
    position: relative; 
    width: 90%; 
    margin: 0 auto; 
    padding: 0 10px; 
} 

.wrapper{ 
    width:100%; 
    max-width: none; 
    margin-left: -10px; 
    margin-right: -10px; 
} 

.col-m1, .col-m2, .col-m3, 
.col-m4, .col-m5, .col-m6, 
.col-m7, .col-m8, .col-m9, 
.col-m10, .col-m11, .col-m12, 
.col-l1, .col-l2, .col-l3, 
.col-l4, .col-l5, .col-l6, 
.col-l7, .col-l8, .col-l9, 
.col-l10, .col-l11, .col-l12, 
.col-xl1, .col-xl2, .col-xl3, 
.col-xl4, .col-xl5, .col-xl6, 
.col-xl7, .col-xl8, .col-xl9, 
.col-xl10, .col-xl11, .col-xl12 { 
    width: 100%; 
    position: relative; 
    float: left; 
    padding:0 10px; 
} 

@media (min-width: 768px) { 
    .container { 
    width: 720px; 
    } 

    .col-m1, .col-l1, .col-xl1 { width: 8.333%; } 
    .col-m2, .col-l2, .col-xl2 { width: 16.666%; } 
    .col-m3, .col-l3, .col-xl3 { width: 24.999%; } 
    .col-m4, .col-l4, .col-xl4 { width: 33.333%; } 
    .col-m5, .col-l5, .col-xl5 { width: 41.666%; } 
    .col-m6, .col-l6, .col-xl6 { width: 49.999%; } 
    .col-m7, .col-l7, .col-xl7 { width: 58.333%; } 
    .col-m8, .col-l8, .col-xl8 { width: 66.666%; } 
    .col-m9, .col-l9, .col-xl9 { width: 74.999%; } 
    .col-m10, .col-l10, .col-xl10 { width: 83.333%; } 
    .col-m11, .col-l11, .col-xl11 { width: 91.666%; } 
    .col-m12, .col-l12, .col-xl12 { width: 100%; } 


    .offset-col-m1 { margin-left: 8.333%; } 
    .offset-col-m2 { margin-left: 16.666%; } 
    .offset-col-m3 { margin-left: 24.999%; } 
    .offset-col-m4 { margin-left: 33.333%; } 
    .offset-col-m5 { margin-left: 41.666%; } 
    .offset-col-m6 { margin-left: 49.999%; } 
    .offset-col-m7 { margin-left: 58.333%; } 
    .offset-col-m8 { margin-left: 66.666%; } 
    .offset-col-m9 { margin-left: 74.999%; } 
    .offset-col-m10 { margin-left: 83.333%; } 
    .offset-col-m11 { margin-left: 91.666%; } 
} 

HTML

サイトの一部のHTMLマークアップ。これは、特にホームページ上のイメージグリッドです。しかし、サイト全体がこの問題を抱えています。

Some HTML markup for the site. This is specifically the image grid on the homepage. But the whole site has this problem.

これは、右側の非拡張/余裕のイメージです。非常に迷惑と私はちょうど理解していない。

This is an image of the non-extension/extra margin on the right side. Very annoying and I just don't understand.

+1

あなたのhtmlはどこですか?私はそれのデモが動作していないのを見たいと思います。 –

+0

私はjekyllサイトを構築しています。https://frankplay.github.io/frankplay-portfolio/ –

+1

そして、おそらく問題がどこにあるかを示すスクリーンショットです。 –

答えて

0

幅を削除します。ラッパークラスの100%を。

+0

それは検査官で働いたようですね?あなたが私の尋ねに気にしないなら、それはなぜ機能するのですか?私は地元の開発のコードに入れる前に理解したいだけです。 –

+0

コンテナクラスはwidth:90%とpadding:0 10pxを持ち、width:100%のラッパークラスはコンテナの幅からパディングを差し引いているので、幅を削除するとラッパーのサイズは自動的に維持され、機能します。 –

関連する問題