CSSとhtmlを連携させて修正しようとしています

Question

私はHTMLとCSSを使ってグリッドシステムを作ろうとしていますが、システムに画像を追加するとその一部が飛び交ってしまいますウィンドウサイズを変更してください（応答する必要があるため）面白いと思いますが、どこに問題があるのか​​分かりません。だから私はあなたに助けを求めている。 JSFiddleは私の仕事です。

私はそれを動作させるためにこの行を修正すべきだと思いますが、わかりません。

Answer 1

問題はmarginはピクセルで、widthは%です。スクリーンの15％* 5 + 23 * 5> 100％。合計が100

15*5 = 75; 
remaining space for margins = 25%/5 = 5 for each box 

ので 変更あなたのコラムスタイリング

.column{ 
    margin:23px 2.5%' 
} 

シフトの問題に常にあるように

あなたは％にマージンをシフトする必要が

コードを見てください：

毎p背景

#farbig_logo_mercedes { 
background: url(http://www.seat-styler.de/wp- content/uploads/2017/02/Mercedes_logo_ori.png) no-repeat center top; 

}

画像がフルサイズであると示されている唯一のトップ65ピクセルシフトされ、中央に整列され意味を有します。

と同じpは、これは、特定の高さと幅を有し、画像を65x65のsqaureに調整同じsrc

<img class="logos_bild alignnone" src="http://www.seat-styler.pl/wp-content/uploads/sites/7/2017/02/Mercedes_logo_edit.png" alt=" Mercedes Logo" width="65" height="65"> 

と子imgを有しています。

これは表示される画像です。ホバーでは、imgタグの不透明度は0に設定され、背景画像は表示されます。

この2つの画像のアライメントに違いがある場合、アイコンはホバー上で踊ります。

このようなレスポンシブルデザインでは、bgなどの2つのイメージをsrcとして使用しないことをお勧めします。

あなたは2枚の画像を使用したい場合は、background

p{ 
    background-image:url(1) 
    } 
p:hover{ 
    background-image:url(2) 
    } 

またはあなたがimg

img { 
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ 
filter: sepia(100%); 
opacity:0.5 
} 
img:hover{ 
filter:none; 
opacity:1 
} 

壊れたコラム＃2

これにフィルタを使用できるよう両方を使用これは、.farbig_logo_fordの高さがgreであるためです他のものよりも良い;

.column{ max-height:113px;} 

も使用することを検討して追加flex

.row{ display:flex; flex-wrap:wrap;} 
    .column{width:15%;} 

削除フロートあなたが応答するようにすべての画像を設定していて、グリッドに応答率と一致していない限り

https://jsfiddle.net/pmzg1nbu/3/