我的身体，包括内容和旁边没有与导航栏的右边缘对齐。我如何修改我的代码，以便在我将内容添加到一边时将其对齐？我应该改变导航栏或身体本身吗？ css怎么样？ - ＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT ;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT ;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT ;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT ;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT ;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT ;
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Birdwatching</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
html
{ height: 100%;
}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #F0EFE2 url(background.png) repeat;
color: #000;
width: 70%;
min-width: 800px;
margin: 0 auto;
}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
img
{ border: 0;}
h1, h2, h3, h4, h5, h6
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #7E2451;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}
h2
{ font: normal 175% 'century gothic', arial, sans-serif;}
h4, h5, h6
{ margin: 0;
padding: 0 0 5px 0;
font: normal 120% arial, sans-serif;}
h5, h6
{ font: italic 95% arial, sans-serif;
padding: 0 0 15px 0;}
nav ul {
background: url(transparent.png) ;
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: #fff;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
margin: 5px;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li a:hover {
color: #000;
background-color: #fff;
}
.dropdown {
display:inline-block;
position: relative;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
left: 50%;
transform: translateX(-50%);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align:left;
}
.dropdown-content a:hover {
background: #bada55;
left:auto;
right:0;
margin-right:-10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
main
{ width: 854px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 0 24px 20px 20px;
background: transparent url(transparent_light.png) repeat;}
article
{ text-align: left;
float: left;
width: 595px;
padding: 0;}
article ul
{ margin: 2px 0 22px 0px;}
article ul li
{ list-style-type: none;
background: url(bullet.png) no-repeat;
margin: 0 0 6px 0;
padding: 0 0 4px 25px;
line-height: 1.5em;}
aside
{ float: right;
width: 210px;
padding: 0 15px 20px 15px;}
aside ul
{ width: 198px;
padding: 4px 0 0 0;
margin: 4px 0 30px 0;}
aside li
{ list-style: none;
padding: 0 0 7px 0; }
aside li a, .sidebar li a:hover
{ padding: 0 0 0 40px;
display: block;
background: transparent url(link.png) no-repeat left center;}
aside li a.selected
{ color: #7E2451;
text-decoration: none;}
</style>
</head>
<body>
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown"><a href="#">Get started</a>
<div class="dropdown-content">
<a href="#">Preparation</a>
<a href="#">D-Day</a>
<a href="#">Useful Resources</a>
</div>
</li>
<li class="dropdown"><a href="#">Gallery</a>
<div class="dropdown-content">
<a href="#">MUN 2015</a>
<a href="#">MUN 2016</a>
<a href="#">MUN 2017</a>
</div>
</li>
<li class="dropdown"><a href="#">Contact Us</a>
<div class="dropdown-content">
<a href="#">Ask A Question</a>
<a href="#">Contact Information</a>
<a href="#">Map</a>
</div>
</li>
<li class="dropdown"><a href="#">Forum</a>
<div class="dropdown-content">
<a href="#">About</a>
<a href="#">Sign-Up</a>
<a href="#">Community</a>
</div>
</li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Welcome</h2>
<p>Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.</p>
<p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ojcNcvb1olg" frameborder="0" allowfullscreen sandbox></iframe>
<h2>Rocking the free web</h2>
<p>Mozilla are a global community of technologists, thinkers, and builders, working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Click on the images below to find more information about the cool stuff Mozilla does. <a href="https://www.flickr.com/photos/mathiasappel/21675551065/">Red panda picture</a> by Mathias Appel.</p>
</article>
<aside>
<h2>Favourite photos</h2>
<a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="Small black bird, black claws, long black slender beak, links to larger version of the image"></a>
<a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="Top half of a pretty bird with bright blue plumage on neck, light colored beak, blue headdress, links to larger version of the image"></a>
<a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="Top half of a large bird with white plumage, very long curved narrow light colored break, links to larger version of the image"></a>
<a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="Large bird, mostly white plumage with black plumage on back and rear, long straight white beak, links to larger version of the image"></a>
</aside>
<aside>
<form>
<h1>Payment form</h1>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<section>
<h2>Contact information</h2>
<fieldset>
<legend>Title</legend>
<ul>
<li>
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." >
Mister
</label>
</li>
<li>
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Ms.">
Miss
</label>
</li>
</ul>
</fieldset>
<p>
<label for="name">
<span>Name: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="name" name="username">
</p>
<p>
<label for="mail">
<span>E-mail: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" id="mail" name="usermail">
</p>
<p>
<label for="pwd">
<span>Password: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" id="pwd" name="password">
</p>
</section>
<section>
<h2>Payment information</h2>
<p>
<label for="card">
<span>Card type:</span>
</label>
<select id="card" name="usercard">
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select>
</p>
<p>
<label for="number">
<span>Card number:</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="number" name="cardnumber">
</p>
<p>
<label for="date">
<span>Expiration date:</span>
<strong><abbr title="required">*</abbr></strong>
<em>formatted as mm/yy</em>
</label>
<input type="text" id="date" name="expiration">
</p>
</section>
<p> <button type="submit">Validate the payment</button> </p>
</form>
</aside>
</main>
</body>