指定した横幅通りに表示されない

前提・実現したいこと

指定したwidthのコンテンツを作りたい

発生している問題・エラーメッセージ

横幅が最大1000pxのコンテンツを作りたいのですが、上手くいきません。
コンテンツにmax-width: 1000px;とし、最大幅を指定しているのですが、webブラウザで見ると画面横幅一杯にコンテンツが広がっています。
widthの指定がおかしいのだと思いますが、どうすれば最大幅1000pxで固定できるのでしょうか。
(各コンテンツの内容は勉強用に当て込んだ物で意味はありません）
何故か、作成しているatomのビュワーで見ると思い通りの表示なのですが、(添付写真1)
実際にブラウザ表示させると、添付写真2のように画面いっぱいまで引き伸ばされます。
勉強し始めで、見当違いのことを聞いているかもしれませんが、宜しければご教示頂けないでしょうか。

該当のソースコード

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>sample</title>
<link href="stylesheet.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/f2da0cd0b0.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="main-visual">
    <div class="top-pic">
    </div>
  </div>

  <section class="f-container">
    <div class="main-column">
      <header>
        <ul>
          <li>記事カテゴリ</li>
          <li>ＳＥＯ</li>
          <li>ＴＩＰＳ</li>
          <li>ＷＯＲＤＰＲＥＳＳ</li>
          <li>ディレクション</li>
          <li>デザイン</li>
          <li>リスティング</li>
        </ul>
      </header>

      <div class="blognew">
        <h1>ブログ新着記事</h1>
      </div>
      <div class="blognew">
        <h1>ブログ新着記事</h1>
      </div>
      <div class="blognew">
        <h1>ブログ新着記事</h1>
      </div>

      <div class="past-wrapper">
        <div class="past">過去記事</div>
        <div class="past">過去記事</div>
        <div class="past">過去記事</div>
        <div class="past">過去記事</div>
        <div class="past">過去記事</div>
        <div class="past">過去記事</div>
      </div>

      <div class="search-all-article">記事一覧を見る</div>

    </div>

    <div class="sub-column">

      <div class="banner">告知バナーです！</div>
      <div class="mailsignup">
        <p>なんでものびるメルマガ登録</p>
        <div class="mailadress">
          <input type="text" value="メールアドレス">
          <a href="#" class="btn mailbtn">登録</a>
        </div>
      </div>

      <div class="sub-column-banner">
        <div class="service-banner banner70">総合バナー</div>
        <div class="webservice-banner banner70">WEB制作サービスバナー</div>
        <div class="seo-banner banner70">SEOコンサルティングバナー</div>
        <div class="listing-banner banner70">リスティング広告運用バナー</div>
      </div>

      <div class="facebook banner">Facebookページ</div>

    </div>
  </section>

  <footer>
    <div class="footer-service">
      <p>サービス</p>
      <ul>
        <li>事例</li>
        <li>リスティング広告</li>
        <li>ＳＥＯコンサルティング</li>
        <li>動画制作</li>
      </ul>
    </div>
    <div class="footer-blog">
      <p>ブログ</p>
      <ul>
        <li>ＳＥＯ</li>
        <li>ディレクション</li>
        <li>リスティング広告</li>
        <li>ＴＩＰＳ</li>
      </ul>
    </div>
    <div class="footer-company">
      <p>運営会社</p>
      <ul>
        <li>グループ概要</li>
        <li>ホーム</li>
        <li>事業紹介</li>
        <li>採用情報</li>
      </ul>
    </div>
  </footer>

</body>
</html>

CSS

html,body {
  box-sizing: border-box;
  font-size: 62.5%;
}
/* メインビジュアル */
.main-visual {
  max-width: 1000px;
  width: 100%;
  background-image: url(main-31.jpg);
  background-size: cover;
  height: 300px;
  background-position: center;
  margin: 0 auto;
}





/* 左に700px,右に300pxのdivを作り、２カラム的な物を作りたい */
.f-container {
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
}
/* 左カラム 700px */
.main-column {
  width: 700px;
  border: 1px solid black;
  flex: 7;
}
/* 右カラム 300px */
.sub-column {
  margin-left: 15px;
  width: 300px;
  border: 1px solid red;
  flex: 3;
}

header {
  margin-top: 20px;
}

header ul {
  padding: 0;
  display: flex;
  list-style: none;
  justify-content: space-around;

}

.banner {
  width: 100%;
  background-color: skyblue;
  margin-top: 20px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blognew {
  width: 100%;
  height: 100px;
  margin-top: 20px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mailsignup {
  background-color: pink;
  margin: 10px 0;
  text-align: center;

}

.mailadress a{
  text-decoration: none;
}

.btn {
  background-color: lime;
  padding-top: 2px;
  padding-bottom: px;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 3px;
  vertical-align: middle;
}

.sub-column-banner {
  border: 1px solid gray;
}

.banner70 {
  background-color: green;
  height: 70px;
  width: 100%;
  text-align: center;
  line-height: 70px;
  margin-bottom: 10px;
}

.listing-banner {
  margin-bottom: 0px;
}

.past-wrapper {
  margin-top: 20px;
  border: 1px solid gold;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.past {
  height: 100px;
  width: 30%;
  background-color: gray;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-all-article {
  width: 100%;
  background-color: gray;
  height: 20px;
  text-align: center;
  line-height: 20px;
  margin-bottom: 20px;
}

footer {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
}

.footer-service,.footer-blog,.footer-company {
  width: 33.3333%;
  border: 1px solid silver;
  font-weight: bold;
}

.footer-service ul {
  display: flex;
  flex-wrap: wrap;

}

.footer-service ul li {
  width: 50%;
}

.footer-blog ul {
  display: flex;
  flex-wrap: wrap;
}

.footer-blog ul li {
  width: 50%;
}

  .footer-company ul {
  display: flex;
  flex-wrap: wrap;
}

.footer-company ul li {
  width: 50%;
}

.footer-service p {
  text-align: center;
}
.footer-blog p {
  text-align: center;
}
.footer-company p {
  text-align: center;
}

試したこと

左カラム、右カラムを覆うメインコンテナに対してmax-width: 1000px;の指定

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2019/10/27 03:51

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

yusuke116

2019/10/27 04:44

失礼いたしました。コードブロックで囲み、再編集致しました。よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

動くサンプル：https://jsfiddle.net/5hk8rocj/show/

提示されたコードで特に問題が無いようです。
別のブラウザで試し、問題が無ければブラウザがズームされていないか確認してみてください。

投稿2019/10/27 07:11

kei344

総合スコア69596

yusuke116

2019/10/27 15:39

回答ありがとうございます。仰る通り特にズームした記憶はないのですが、なぜかブラウザがズームされていただけでした・・・ご回答ありがとうございました、疑問が解けました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

指定した横幅通りに表示されない

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

補足情報（FW/ツールのバージョンなど）

関連した質問