My navigation bar is causing me trouble as it appears to be too wide, creating extra space on the right side. I've tried adjusting the width with some code, but as I'm working on making the site responsive, shrinking the code down to around 320px results in the text being too small and difficult to interact with. Oddly enough, it looks fine when I test it on my local computer, but once it's on a server and viewed on my phone, it looks terrible. Has anyone encountered this issue before or can offer insight into what I might be doing wrong? JSFiddle
HTML5
<div id="header-banner">
<div class="wrapper">
<header> <a href="index.html">
<img id="logo" alt="PT Logo" src="Images/PT-logo.png"></a>
<nav id="main-nav">
<ul id="nav">
<li><a href="index.html">Home</a>
</li>
<li><a href="#">CityName</a>
</li>
<li><a href="#">CityName</a>
</li>
</ul>
</nav>
</header>
</div>
</div>
CSS3
/* ===== HEADER NAVIGATION AREA ===== */
#main-nav {
position: relative;
left: 50%;
bottom: 20px;
height: 40px;
background-color: blue;
}
#nav {
list-style: none;
margin: auto;
}
#nav li {
float: left;
display: inline;
}
#nav li a {
color: #DB7093;
display: block;
padding: 3px 15px;
height: 20px;
}
#nav li a:hover {
background-color: #DB7093;
color: #F0F8FF;
text-shadow: none;
}