Width of nav caused page extra space to the right - html

Question

I have a problem with my nav where it's so wide that it keep giving me extra space to the right. I have no idea why it's so wide, I tried making the with of it smaller with some code, but I'm making the site responsive and when I bring the code down to around 320px it is based on the screen size making the words really hard to see and click. Actually it looks fine on my local computer when I test it, but putting it on a server and actually looking at it on my phone makes it look terrible. Anyone have any problems like this before or can maybe see what I'm 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>Home
</li>
<li>CityName
</li>
<li>CityName
</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;
}

Answer 1

Try to remove the margin:auto, and edit padding: 3px 15px to padding: 3px 1px, just to see whether this is your porblem.
This might be the solution:
#main-nav {
position: relative;
left: 50%;
width:350px;
bottom: 20px;
height: 40px;
background-color: blue;
}
Add widthproperty to your #main-nav.

Answer 2

JSFiddle Example: http://jsfiddle.net/8K2bL/
/* MOBILE - 649 = logo + nav */
#media only screen and (max-width: 649px) {
#logo{display:block !important;}
#main-nav{
margin:0 auto !important;
bottom:auto !important;
right:auto !important;
}
header{
width:320px !important;
margin:0 auto;
}
}
#logo{
width:auto;
height:100%;
display:inline;
}
header{
height:100px;
width:100%;
position:relative;
}
/* ===== HEADER NAVIGATION AREA ===== */
#main-nav {
float:right;
position:absolute;
bottom:0;
right:0;
}

Answer 3

Try structuring the html better. I updated your js fiddle and restructured the html, added a couple of classes and modified the existing #main-nav. You can find it in this jsfiddle
I would also recommend you to look in to bootstrap for responsive css layouts