レスポンシブ時スペースができてしまう

Question

PCデザインを先に作り、SPデザインをしています。
(iphone6/7/8で設定)

横にグレーのスペースができてしまい、それを無くしたいです。
header画像をspサイズのものに変えたがスペースは変わりませんでした。

ご教授お願い致します。

  <!-- header始まり -->
  <header>
    <div class="logo">
      <a href="index.html"><img src="images/logo.png" alt="SNAPPERS"></a>
    </div>
    <nav>
      <ul class="global-nav">
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <!-- header終わり -->
  
  <!-- wrap始まり -->
  <div id="wrap">
    <div class="content">
      <div class="main-center">
        <h1>About</h1>
        <p>SNAPPERS代表、山田太郎のプロフィールや経歴の紹介ページです。</p>
        <section class="profile clearfix">
          <div class="profile-txt">
            <h2 class="icon">Profile</h2>
            <p><span>SNAPPERS 代表：山田　太郎</span><br>アナログ、デジタルを問わず、トイカメラやポラロイド、ビデオカメラに至るまで、あらゆるカメラに夢中になって遊んでいるうちに自然とカメラマンとしての道を志すようになる。<br>大学卒業後、有名カメラマンのアシスタントを経て渡米。世界各国を放浪しながら撮影をする中で、現在のアウトドアカメラマンとしてのスタイルを確立する。2016年に帰国し、「SNAPPERS」を設立。<br>現在は、雑誌の表紙やカタログの撮影を中心に、映像作品などにもカメラマンとして参加するなど幅広く活躍している。</p>
          </div>
          <img src="images/about-profile.png" alt="山田太郎プロフィール画像" class="profile-image">
        </section>
        <section class="career">
          <h2 class="icon">Career and Job history</h2>
          <table>
            <tr>
              <th>1994年3月</th>
              <td>丸三角芸術大学写真科 卒業　服部写真研究所に入社、服部英明氏に師事</td>
            </tr>
            <tr>
              <th>2012年8月</th>
              <td>イタリア・ミラノで開催されたコンクールにて、審査員特別賞受賞</td>
            </tr>
            <tr>
              <th>2016年1月</th>
              <td>帰国し「SNAPPERS」を設立</td>
            </tr>
            <tr>
              <th>2016年4月</th>
              <td>Aichi Musiumにて初の写真展「Snap!Snap!」を開催</td>
            </tr>
          </table>
        </section>
      </div>
    </div>
  </div>
  <!-- wrap終わり -->
  
  <!-- footer始まり -->
  <footer>
    <small>(c)2017 Hattori-studio.</small>
  </footer>
  <!-- footer終わり -->

@media screen and (max-width:600px) {
  /* 画面サイズが600px以下の場合に適用 */
  
  body {
    font-size: 3.5vw;
  }
  
  h1 {
    font-size: 7.2vw;
  }
  
  h2 {
    font-size: 6vw;
  }
  
  header {
    width: auto;
    margin: 0 5%;
  }
  
  .logo {
    float: none;
    margin-top: 60px;
    text-align: center;
  }
  
  .global-nav {
    float: none;
    margin-top: 40px;
    text-align: center;
  }
  
  .global-nav li {
    display: inline;
    float: none;
    margin: 0 8px;
  }
  
  #wrap {
    margin-top: 40px;
    padding: 35px 0 0;
  }
  
  .content {
    width: 100%;
  }
  
  .main {
    float: none;
    width: auto;
    margin: 0 5%;
  }
  
  h2 img {
    max-width: 100%;
  }
  
  #portfolio {
    background-image: url("../images/bg-portfolio-sp.jpg");
  }
  
  .sidebar {
    width: auto;
    float: none;
    margin: 0;
    padding: 30px 10% 10px;
    background-color: #f7f6f4;
  }
  
   .career {
    width: auto;
    margin: 0;
  }
  
  .main-center {
    float: none;
    width: auto;
    margin: 0 5%;
  }
  
  .profile {
    margin-top: 40px;
    padding: 35px 0 0;
  }
  
   .profile-txt {
    float: none;
    width: auto;
    margin: 0;
  }
  
  #about {
    background-image: url("../images/bg-about-sp.jpg");
  }
  
  .career {
    width: auto;
    margin: 0;
    padding: 0 0 50px 0;
    float: none;
    font-family: 'Bitter', serif;
  }
  
  table {
     line-height: 1.5;
    border-spacing: 0;
    border-collapse: collapse;
  }

  #about .career td {
    width: 660px;
    padding: 0 0 0 5px;
    border: 1px solid #cccccc;
  }
  
  #about .profile-txt p {
    margin: 0 200px 10px 0;
   
  }
  
}

Comments

[yasutomi]

これでは回答不可ですのでCSSを全文追記をお願いします。

Answer 1

#all-wrapper {
  width:100%;
  overflow:hidden;
}

<div id="all-wrapper">
  <!-- Header から Footer まで全部つっこむ -->
</div>

それで直らなかったら提示のデータからじゃ無理

Comments

[risacuspin]

情報足らずですみません。
おかげさまで解決しましたありがとうございます！