トップページのhtml css修正

Question

お世話になっております。
トップページの修正についてご教示いただきたいです。

こちらをスマホサイズで見ていただいた際、スライダーの下に横長のバナーが二つ、その下に一段に2つずつ合計6つのバナーがあるのですが、バナーごとにスペースを空けたいです。
今も空いているのですが、６つあるうちの右側３つにmargin-leftをつけてスペースを空けている状態なのですが、右側のバナーが右側に寄ってしまっている状態なので、他にスペースをうまくあける方法を教えていただきたいです。
６つの画像のサイズを表示サイズを画面に対して95%にして、各バナーの間に5%のスペースを取る形がいいです。

https://www.rakuten.ne.jp/gold/japannail/

Answer

htmlとcssの記述は「報告する」から送信しました。

Answer

ECマスターズの伊藤です。

> 今も空いているのですが、６つあるうちの右側３つにmargin-leftをつけてスペースを空けている状態なのですが、右側のバナーが右側に寄ってしまっている状態なので、他にスペースをうまくあける方法を教えていただきたいです。

https://ec-masters.gyazo.com/3e19042daef2641f91c6e5cd373562e6
上記のイメージでよろしかったでしょうか。

その場合、下記の通りでお願いします。

以下のCSSを削除
＝＝＝＝＝＝＝＝＝＝
img の
bordre

.key_under_sp内div の 
width

img.margin_topbottomleft の
margin-left: 8px;

img.margin_topbottomright　の
margin-right: 8px;
＝＝＝＝＝＝＝＝＝＝


以下のCSSを追加
＝＝＝＝＝＝＝＝＝＝
.key_under_sp a{
border: 0.05em solid rgb(205, 205, 216);
display: block;
}

.key_under_sp{
width: 90%;
    margin: auto;
	justify-content: space-between;
	margin-bottom : 2%
}
.key_under_sp > div{
    width: 49%;
}
＝＝＝＝＝＝＝＝＝＝

本来であれば上記で設定可能なのですが、
全体的に左によっているようで、
こちらは全体的に作り直していただく必要が
あるかと思います。

そのため、
.key_under_sp　の　margin:autを
margin: 0 4% 0 6%;
にしていただくことで、スクショの
状態になります。

数字の部分においては、ご希望の数値に
変更をお願いします。

また、修正の際は、必ずバックアップを
取っていただきますよう、お願いいたします。

Answer

迅速なお返事ありがとうございます！
送っていただいた画像のイメージなのですが、バナーの左右のスペースは空けず（左右は画像めいっぱい）、真ん中のみにスペースが空いた状態にするにはどうすれば宜しいでしょうか？

Answer

ECマスターズの伊藤です。

> 送っていただいた画像のイメージなのですが、バナーの左右のスペースは空けず（左右は画像めいっぱい）、真ん中のみにスペースが空いた状態にするにはどうすれば宜しいでしょうか？

.key_under_sp　の　
margin: 0 4% 0 6%;

こちらが、
上　右　下　左
 0 4% 0 6%;
の順で、余白が設定できますので、

数値を変更して、修正をお願い致します。
https://ec-masters.gyazo.com/62beb1a2428424f263a74151dcd59121

Answer

教えていただいた通りに書いて出来ました、
素早いご対応大変助かりました、ありがとうございました！