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

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

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

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

イメージ説明

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

HTML
<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>

CSS
.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;
}

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

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

イメージ説明

HTML
 <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>

CSS
.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;
}