我正在尝试将两列分别用于左侧的垂直导航栏，内容列应该向右浮动。我尝试了所有可能的方法。页面看起来一点也不好。我不知道我错过了什么。任何帮助将不胜感激。有什么建议吗？我已经尝试了几个小时，但没有成功。我仍在学习这个过程。我尝试向左浮动导航栏，向右浮动内容，但这并没有按预期工作。
body {
background-color: red;
color: black;
font-family: Verdana, Arial, sans-serif;
}
#wrapper {
background-color: #dce9f7;
margin-left: auto;
margin-right: auto;
width: 70%;
min-width: 700px;
box-shadow: 5px 5px 5px 5px #828282;
}
h1 {
background-color: #d9c7b4;
color: black;
text-align: center;
}
h2 {
background-color: white;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
}
#nav {
text-align: center;
}
#content {
padding: 25px;
}
.floatright {
float: right;
padding-bottom: 20px;
}
.floatleft {
float: left;
padding: 20px;
}<div id="wrapper">
<h1>The Nothing Burger</h1>
<div id="nav">
<a href="index.html">Home</a>
<a href="menu.html">Menu</a>
<a href="location.html">Location</a>
</div>
<h2>Only the best food!</h2>
<div class="floatright">
<img src="plate.jpg" alt="Great Food" width="333" height="156">
</div>
<div id="content">
<ul>
<li>Fresh, Healthy Cuisine</li>
<li>Friendly Service</li>
<li>Open for Breakfast, Lunch and Dinner</li>
</ul>
</div>
<div>123 Elm Street<br/> Appleton, CA<br/> 1-888-555-5555
<br/><br/>
</div>
</div>在导航栏元素和内容元素周围添加一个包装器div，如下所示，并添加这些样式
.wrapperDiv {
display: flex;
}
#nav {
width: 30%;
}
.content-wrapper {
width: 70%
}
#nav a {
display: block;
}
body {
background-color: red;
color: black;
font-family: Verdana, Arial, sans-serif;
}
#wrapper {
background-color: #dce9f7;
margin-left: auto;
margin-right: auto;
width: 70%;
min-width: 700px;
box-shadow: 5px 5px 5px 5px #828282;
}
h1 {
background-color: #d9c7b4;
color: black;
text-align: center;
}
h2 {
margin: 0;
background-color: white;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
}
#nav {
text-align: center;
}
#content {
padding: 25px;
}
.floatright {
float: right;
padding-bottom: 20px;
}
.floatleft {
float: left;
padding: 20px;
}
.wrapperDiv {
display: flex;
}
#nav {
width: 30%;
}
.content-wrapper {
width: 70%
}
#nav a {
display: block;
}<body>
<div id="wrapper">
<h1>The Nothing Burger</h1>
<div class="wrapperDiv">
<div id="nav">
<a href="index.html">Home</a>
<a href="menu.html">Menu</a>
<a href="location.html">Location</a>
</div>
<div class="content-wrapper">
<h2>Only the best food!</h2>
<div class="floatright">
<img src="plate.jpg" alt="Great Food" width="333" height="156">
</div>
<div id="content">
<ul>
<li>Fresh, Healthy Cuisine</li>
<li>Friendly Service</li>
<li>Open for Breakfast, Lunch and Dinner</li>
</ul>
<div>123 Elm Street<br/> Appleton, CA<br/> 1-888-555-5555
<br/><br/>
</div>
</div>
</div>
</div>