我怎样才能让我的导航栏保持在一条线上？
/*--------------------------------------------------------
2.Menu
--------------------------------------------------------*/
.menu{font:12px JosefinSans;line-height:15px;letter-spacing:1px;min-height:85px;position:absolute;z-index:1001;background-color:#df32b4;text-transform:uppercase;text-align:center; display: inline-block;}
.menu-style{color:#a474a5;text-decoration:none;-webkit-transition:all 0.20s ease-in-out;-moz-transition:all 0.70s ease-in-out;-o-transition:all 0.70s ease-in-out;-ms-transition:all 0.70s ease-in-out;padding:5px;}
.menu-style:hover{padding:15px 5px;color:#2a1131;background:#ffffff;/**/}
.selected{padding:15px 5px;color:#252525;/*background:#fafafa;*/}
#top{position:absolute;z-index:5001;background:#fff ;}<!--url(../_images/top.png) no-repeat center 10px;padding-bottom:40px-->
.menu{letter-spacing:10px;border-right:1px solid #dedede;border-left:1px solid #dedede;}
#menu{display:inline-block;text-transform:uppercase;margin:auto;padding-top:100px;/*min-height:48px;padding-top:26px;*/font-size:14px;line-height:150%;}
#menu li{display:inline;margin-left:5px;}
<body>
<center>
<ul id="menu">
<li><a href="index.htm" class="menu-style not-this">Home</a></li>
<li><a href="our-story.htm" class="menu-style not-this">Venue</a></li>
<li><a href="photos.htm" class="menu-style not-this">Getting to venue</a></li>
<li><a href="out-of-towners.htm" class="menu-style not-this">Accommodation</a></li>
<li><a href="thank-you.htm" class="menu-style not-this">Schedule</a></li>
<li><a href="registry.htm" class="menu-style not-this">Wedding list</a></li>
<li><a href="rsvp.htm" class="menu-style not-this">RSVP</a></li>
<li><a href="events.htm" class="menu-style not-this">About Denia</a></li>
</ul>
</center>
</body>