cssのbackgroundが画面の大きさを変更すると横幅いっぱいにならないです。

前提・実現したいこと

デベロッパーツールで画面の大きさを変更したら、指定している背景色（backgroud）の横幅が画面の大きさよりも小さくなります。
ご教授いただければ幸いです。

該当のソースコード

htlm
<header>
    <div class="container">
        <img src="https://＃" alt="logo" width="164px" height="50px" class="logo">
      <div class="menu">
        <ul class="menus">
          <li><a href="#"><i class="fas fa-flag fa-fw"></i> 特徴</a></li>
          <li><a href="#"><i class="fas fa-book fa-fw"></i> 使い方ガイド</a></li>
          <li><a href="#"><i class="fas fa-cloud-download-alt"></i> ダウンロード</a></li>
        </ul>
      </div>
    </div>
  </header>
css
* {
	margin: 0px;
	padding: 0px;
  text-decoration: none;
  cursor: pointer;
	list-style: none;
}
body {
  background-color: #e8ece9;
	font-family: "Helvetica","Arial","BIZ UDGothic",YuGothic,"Yu Gothic","Hiragino Sans","ヒラギノ角ゴシック","メイリオ",Meiryo,sans-serif;
}
table {
  border-collapse: collapse;
	border: none;
}
header {
  height: 62px;
  background-color: #58a9ef;
}
.container{
  margin: 0 auto;
  width: 1000px;
}
img.logo{
  padding: 6px 6px 6px 0px;
}
.menu{
  float: right;
}
.menus>li{
  list-style: none;
  float: left;
  height: 62px;
  line-height: 62px;
  font-size: 16px;
  padding: 0px 10px;
}
.menus>li>a{
  color: #fff;
  transition: .5s
}
.menus>li>a:hover{
  border-bottom: 2px solid white;
}

試したこと

ここに問題に対して試したことを記載してください。

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

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

kei344

2019/02/24 02:37

（質問文は編集できます）コードはスクリーンショットでなくコードブロックにテキストでお書きください。

ntttt

2019/02/24 03:10

かしこまりました。修正致しました。もし理由がお分かりになれば、教えて頂きたいです。

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

回答1件

ベストアンサー

.containerが画面幅を超えるからでは。

CSS
1.container{
2  margin: 0 auto;
3  /*width: 1000px;*/
4  max-width: 1000px;
5}
6```**動くサンプル：**[https://jsfiddle.net/rpnkmv1o/](https://jsfiddle.net/rpnkmv1o/)