max-width box-sizingを指定してもスマホのwidthがはみ出てしまう。

Question

表題の通り、画像を挿入したポートフォリオを作成しているが、
max-widthを100%、box-sizingをborder-boxに指定してCSSに追加してもwidthがスマホの幅からはみ出てしまっている。

##期待しているゴール
widthがデバイスの幅をはみ出ずに収まった状態で表示される。

検索したキーワード

・レスポンシブデザイン　width はみ出る
・画像　width はみ出る
・css width レスポンシブデザイン

試したこと

widthを100%にする
padding,marginを０にする

前提

Bootstrap3を使用
viewportは設定済み

ソースコード

HTML

   <div class="outputs section container">
      <h2>Work</h2>
      <div class="card_wrap row">
        <div class="card col-md-6 col-11 col-sm-12">
          <a href="https://angurlar-phonecat.web.app/#!/phones/motorola-xoom-with-wi-fi">
            Angularで作った携帯製品紹介ページ
            <img src="./img/angular.png" alt="angurlarで作った製品紹介ページ">
          </a>

        </div>
        <div class="card col-md-6 col-11 col-xs-12">
          <a href="#">
            PortFolio
            <img src="./img/portfolio.png" alt="PortFolio">
          </a>
        </div>
        <div class="card col-md-6 col-11">
          <a href="https://moriokameda.github.io/ReactStudy/TodoTask/">ReactTodoアプリ</a>
          <img src="" alt="Reactで作ったTodoアプリ">
        </div>
      </div>
    </div>

CSS

.outputs {
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

  .card_wrap {
    /* display: flex; */
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
  }
    .card {
      position: relative;
      box-sizing: border-box;
      border: 1px solid #999;
      border-radius: 10px;
      text-align: center;
      max-width: 100%;
      padding: 0;
      /* padding-bottom: 3rem; */
    }
    .card a {
      color: #000;
      /* font-size: 18px; */
    }
    .card img {
      position: relative;
      display: block;
      max-width: 100%;
      width: 100%;
      height: auto;
      box-sizing: border-box;
      border-radius: 10px;
      overflow: hidden;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
    }

@media screen and (max-width: 767px) {
  .card_wrap {
    display: block;
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }
    .card {
      position: relative;
      width: 100%;
    }
}

Answer 1

max-widthを100%にしていたためにエラーとなってしまい、widthが効いていなかった

Answer 2

viewportを設定していないとか。

【レスポンシブデザイン - ウェブ開発を学ぶ | MDN】
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Responsive_Design#The_viewport_meta_tag

<meta name="viewport" content="width=device-width,initial-scale=1">

Comments

[kamedamorio]

前提漏れており申し訳ございません。
viewportは設定しております！

[kei344]

ではデベロッパーツールで「何が押し広げているか」を確認してみてください。

【Web関係者は知っておくべきGoogleChromeデベロッパーツールの使い方 | Ocadweb】
https://ocadweb.com/web/googlechromedevelopertools