2
私は順序付けられていないリストを使ってnavbarを作成しました。また、私のロゴとnavbarリンクを含むラッパーを作成しました。ラッパーの最小幅は960ピクセルです。ブラウザのウィンドウが完全に展開されていると、うまく見えます。ブラウザが最小化されても浮動小数点型の要素のフォーマットは拡張されません
完全に拡張ウィンドウ 
Iラッパーよりも狭くなるようにウィンドウを最小化し、ナビゲーションバーの端部にオーバーバックスクロール、単に背景色であるナビゲーションバー上のフォーマット（ ）が失われる。ヘッダにも同様のことが起こります。まだの最小幅で私のラッパーを維持しながら、私は、ヘッダの足跡の画像やウィンドウの右側に拡張するため、ULのオレンジ色の背景色を取得できますか
最小化したウィンドウ 
960ピクセルですか？
#nav idとフォーマットを拡張したヘッダーに「overflow-x：auto」を試しましたが、スクロールバーやその他の望ましくない癖を作成していました。
私の問題は、li要素が浮動していることと関係があり、clearfixを試みたが、間違っていたか動作しなかった。
私は理想的にはHTMLとCSSだけを使って解決策を探しています。それでも、私はflexboxが解決策であるかもしれないことを集めていますが、私はまだFlexboxに没頭することを避けることを望んでいました。しかし、私がする必要があれば、私はします。
私のコードは以下の通りです。どんな助けもありがとう！
* {
box-sizing: border-box;
margin: 0;
}
.wrapper {
width: 960px;
margin: 0 auto;
}
#logo {
width: 160px;
height: 160px;
border-radius: 50%;
background-color: white;
border-color: black;
border-style: dotted;
border-width: 1px;
}
#nav {
list-style-type: none;
margin: -2.25em 0;
background-color: rgba(240, 100, 60, 1);
height: 2em;
cursor: default;
}
#nav li {
float: right;
font-size: 1.25em;
width: 8em;
text-align: center;
}
header {
background-image: url('../images/Asset%202.png');
background-repeat: repeat-x;
}<!DOCTYPE html>
<html>
<head>
<link href="styles/stack-overflow-style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<div class="wrapper">
<img id="logo" src="https://i.pinimg.com/originals/4e/de/bc/4edebc3259e32539dd6d6d29d5d8474a.jpg" alt="Good Boy Dog Care Logo">
</div>
<ul id="nav">
<div class="wrapper">
<li>Contact</li>
<li>Services</li>
</div>
</ul>
</header>
</body>
</html>