スマホ画面で複数画像を画面内に収めたいです。

前提・実現したいこと

スマホ画面で複数画像を横並びにしたいのですが、
横並びにはなるのですが、スクロールバーが出てしまい
画面内に複数画像が収まりません。
ちなみにamebaowndをつかってHPを作成中です。

初心者で分からないことばかりなので、ご教授頂けると幸いです。

HTML
1<div class="sns">
2<div class="line">
3<a href="URL"><img src="画像width=267"></a>
4</div>
5<div class="insta">
6<a href="URL"><img src="画像width=267"></a>
7</div>
8<div class="ameba">
9<a href="URL"><img src="画像width=267"></a>
10</div>
11</div>

SCC
1
2.sns{
3    display: flex;
4    width: 100vw;
5    justify-content: space-between;
6}

試したこと

パソコン画面でも見れるようにしたいため
画像サイズを小さくするという方法は試しましたが、
うまくいきませんでした。

m.ts10806

2021/05/02 04:41

提示されたCSSとHTML見る限りどこに対しても当たらないようになってませんか。実際のコードをコピペしてますか？

dico

2021/05/02 05:08

初心者であまり理解しておらず、ただいま変更いたしました。ぐちゃぐちゃですみません。

退会済みユーザー

2021/05/02 10:53

いくつかHTMLタグのエラーが見受けられましたので、それも関係しているのかな？と思います。以下のコードに変更するといかがでしょうか？ -------- <div class="sns"> <div class="line"> <a href="画像width=267"><img src="画像width=267"></a> </div> <div class="insta"> <a href="URL"><img src="画像width=267"></a> </div> <div class="ameba"> <a href="URL"><img src="画像width=267"></a> </div> </div> --------- 修正点はテキスト比較ツールなどを使って見て頂ければ幸いです。 https://difff.jp/