How to center a navbar on a different resolution? - html

Question

So after hours of searching I still can't find the fix for me stupidity, I'm new to this but on my main monitor it centers just fine
1920x1080:
Larger image
But will my 1280x1024:
Smaller image
So as you can see it's uncomfortably off balanced so here's my code for the website..
/*---Start Navbar---*/
.nav-main {
display: block;
list-style: none;
position: relative;
width: 100%;
height: 70px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
.nav-logo {
float: left;
height: 40px;
padding: 15px 20px;
line-height: 60px;
display: inline-block;
list-style-type: none;
}
ul {
text-align: center;
position: relative;
margin: 0;
padding: 0;
float: left;
left: 30%;
list-style-type: none;
display: inline-block;
}
ul li {
float: inherit;
}
.nav-item {
display: inline-block;
list-style-type: none;
padding: 15px 20px;
height: 40px;
width: auto;
line-height: 50px;
color: #fff;
text-decoration: none;
}
li a:hover {
background-color: #444;
}
/*---End Navbar---*/
<nav class="nav-main">
<ul>
<li>
<a href="http://phalanxgaming.org/" class="nav-logo" target="_blank">
<img src="http://i.imgur.com/sg5DZao.png?2" alt="logo" style="width:60px;height:60px;">
</a>
</li>
<li>
CONTACT US
</li>
<li>
TEAMSPEAK
</li>
<li>
DONATE
</li>
<li>
STEAM
</li>
<li>
TWITCH
</li>
</ul>
</nav>
Any and all support is great, ps sorry for slurring I'm quite tired and I couldn't sleep til I fix this issue.

Answer 1

What you need to do is, to display your list elements inline. So set up
ul li {
/* float: inherit; */
display: inline;
}
After that, just remove your float and left attributes on your ul styling and set your .nav-mains height to auto.
Check this.

Answer 2

how about wrapping it in a div and using width:auto?
http://www.456bereastreet.com/lab/width-auto/

Answer 3

First, remove
left: 30%;
from
ul {...}
then change this:
ul li {
display: inline-block;
vertical-align: middle;
}