フレックスボックスで3つずつ要素を並べたいのですが、サイトの幅よりはみ出してしまいます。

Question

独学でwebデザインを勉強しているものです。
tetratailを使って初めて質問させていただきます。
初心者でレベルが低い質問なのですが、どうしてもわからないので、助けてもらえると嬉しいです🙏😭！！
質問は二つあります。
何卒よろしくお願いします。

質問① Flexbox がはみ出します。

添付の写真のようにフレックスボックスで3つずつ要素を並べたいのですが、なぜかサイトの幅よりはみ出してしまいます・・・。

コードは以下の通りです。（読みにくかったらすみません。）

<div class="ex-list-1">
         <div class="ex-item">
           <div class="card">
            <div class="ex-img"><img src="images/pics/egg.png" alt=""></div>
            <p class="ex-name" id="contents-title">朝どれ卵採り</p>
            <p class="ex-info" id="normal">当ホテルでは地鶏を25匹育てています。
            こだわりの配合飼料で育てた鶏卵は格別の味！
            朝早起きして、鶏小屋へ。
            とれたて卵の卵かけご飯は格別です！</p>
           </div>
         </div>

         <div class="ex-item">
           <div class="card">
            <div class="ex-img"><img src="images/pics/agri.png" alt=""></div>
            <p class="ex-name"id="contents-title">農業体験</p>
            <p class="ex-info"id="normal">当宿では、化学肥料や農薬は一切使用せずに野菜を育てています。
            大地の恵みを吸い上げた野菜たちはどれも個性的で味が濃いです。
            そんな野菜たちの収穫体験をしてみませんか？
            </p>
          </div>
         </div>

         <div class="ex-item">
           <div class="card">
              <div class="ex-img"><img src="images/pics/fish.png" alt=""></div>
              <p class="ex-name"id="contents-title">オイカワ釣り</p>
              <p class="ex-info"id="normal">沢には野生のオイカワがたくさんいます。
              オイカワ釣りに挑戦してみませんか？
              釣った後は塩焼きにして食べるととっても美味しいです。釣り道具の貸出もいたしております。</p>
            </div>
         </div>
         
        </div>
        <!-- ex-list-1 -->

        <div class="ex-list-2">
         <div class="ex-item">
           <div class="card">
            <div class="ex-img"><img src="images/pics/cooking-class.png" alt=""></div>
            <p class="ex-name"id="contents-title">お料理体験</p>
            <p class="ex-info"id="normal">当宿では、体に優しい自然派の料理を提供しております。シェフは、国内外を飛びまわってマクロビ料理を学んだ面白い経歴の持ち主です！
            お話ししながら一緒に晩御飯を作りませんか？</p>
          </div>
         </div>

         <div class="ex-item">
           <div class="card">
            <div class="ex-img"><img src="images/pics/sawanobori.png" alt=""></div>
            <p class="ex-name"id="contents-title">沢登り</p>
            <p class="ex-info"id="normal">夏は沢登りが人気です。
            透明度が高くとても綺麗な沢です。
            沢登りのインストラクターの資格があるスタッフがガイドいたします。
            沢ぐつ、ヘルメットなどの装備は貸出いたします。
            </p>
          </div>
         </div>

         <div class="ex-item">
          <div class="card">
            <div class="ex-img"><img src="images/pics/tour.png" alt=""></div>
            <p class="ex-name"id="contents-title">竹子集落ツアー</p>
            <p class="ex-info"id="normal">地元の方がガイドで竹子のツアーを開催します。
            ガイドの方はとても気さくで、先祖代々この地域に住んでいらっしゃいます。
            お散歩しながら、歴史に思いを馳せてみませんか？
            </p>
          </div>
         </div>
       </div>
       <!-- ex-list-2 -->

     </div>

.card {
  height: 100%;
  background-color: #F2F8FB;
  border-radius: 20px;
  width: 350px;
  padding: 20px 0px 20px 0px;
  border: solid 1px rgba(128, 128, 128, 0.314);
}

.ex-name {
  padding-top: 10px;
}
.ex-list-1,.ex-list-2 {
  display: flex;
  justify-content: space-between;
  padding-bottom: 50px;
}

.ex-list-2 {
  padding-bottom: 300px;
}

.ex-item {
  width: 200px;
  text-align: center;
  padding-top: 100px;
}

質問②　テキストメインビューの左端に謎の白線がでる

添付画像のように、赤枠で囲った部分の白線が消えません。

 <div class="mv">
        <a href="#"><img src="images/pc/book-button-maru.png" alt="ご予約ボタン" class="mv-book"></a>
        <div class="mv-container">
          <img class="mv-title" src="images/pc/Mvtitle.png" alt="">
          <p class="mv-subtitle">やまのやど</p>
        </div>
      </div>

.mv {
  background-image: url(../images/pics/breakfast.png);
  width: 100%;
  height: calc(100vh - 70px);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
 
}

img.mv-book {
  position: relative;
  top: 80px;
  left:900px;
  width: 170px;
}


.mv-container {
  text-align: center;
  padding-top: 120px;
}


p.mv-subtitle {
  font-family: 'ten-mincho-text',serif;
  font-weight: 400;
  font-style: normal;
  font-size: 60px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-align: center;
  color: #516741;
  padding-top: 20px;
}

img.mv-title {
  text-align: center;
}

Comments

[recal]

質問は1投稿に1つに絞ったほうがいいですよ。
質問のタイトルに(2)の内容含まれてないですよね？

おそらくサイトの横幅を決めている要素だと思うのですが
<div class="ex-list-1">の親要素のhtmlとcssを教えてください。

Answer 1

①

大きいものを小さいものの中に入れようとしているので、はみ出しています。

         <div class="ex-item">
           <div class="card">

		.card {
			width: 350px;
		}

		.ex-item {
			width: 200px;
		}

解決方法ですが、大きいものを小さいものの中に入れないようにした方がいいです。

---

②

ご提示のコードを試してみましたが、問題が再現しませんでした。

おそらく、ご提示の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。

問題再現の手順をもう少し詳しく書いていただけますか？