HTML/CSSでMenuバーの背景を横幅いっぱいの可変にしつつ、Menuの中のコンテンツ幅は960px固定にしたい。

Question

前提・実現したいこと

HTML/CSSでMenuバーの背景を横幅いっぱいの可変にしつつ、Menuの中の文字は960px固定にしたい。

サンプルサイト
https://manablog.org/

発生している問題

MenuのWidthを幅いっぱいにすると、中の文字も同様に動いてしまう。

該当のソースコード

＝＝＝　HTML　＝＝＝＝
<div id="gnav">
<div id ="select">
<li><a href="homepage.html">ホーム</a></li>
<li><a href="page/About_This_Site.html">このサイトについて</a></li>
<li><a href="Author.html">管理者</a></li>
<li><a href="contact.html">ご意見</a></li>
</div>

＝＝＝CSS＝＝＝
#gnav{
height: 150px;
background-color:rgb(255, 248, 220 );
}

#select li{
float:left;
margin:10px 0px 0px 30px;
padding:10px;
list-style-type:none;
font-size: 25px;

試したこと

marginを-100pxにしたりしましたが、画面のサイズを変えると文字も動いてしまうので、Menuの中身に固定にするべきだと思いますが、方法がわかりません。

補足情報

無し

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

Comments

[hatena19]

コードはマークダウンのコードタグ内にいれてください。
```言語名
コードはここに
```
あるいは、コードを選択して、ツールバーの<code>ボタンクリック

Answer 1

#gnav {
  width: 100%;
}
#select {
  width: 960px;
  margin: 0 auto;
}

Comments

[ft_ft]

ありがとうございます！
想定していた通りに表示されました！！！