How do I customize my scrolling navbar? - html

Question

I currently have a navbar that stays relative as I scroll; what I want to do is have the bar span the entire top from left to right (responsive to different screens) with no gaps on either side. Also, when I move my cursor over the bar or click on one of the links it begins shrinking from the right to the left, down to about half of it's original size.
Here is a screenshot of my current navbar: http://prntscr.com/5x02ef
Here is my HTML:
<div id="header">
<div id="navbar">
<ul>
<li>
Me
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
And here is my CSS code:
#header {
position: relative;
}
#navbar {
text-align: center;
text-decoration: none;
position: fixed;
top: 10px;
margin-top:1.2%;
}
ul {
position: fixed;
margin: 0px;
height: auto;
}
li {
display: inline;
border: 2px solid rgb(73, 73, 73);
border-left: none;
border-right: none;
border-top:none;
padding-top: 1.562em;
padding-bottom: 1.562em;
padding-left:14%;
padding-right:14%;
background-color: #FFFFFF;
}

Answer 1

is this what you want?
fiddle : http://jsfiddle.net/PrakharThakur/ksfqv5bf/embedded/result/
#navbar {
text-align: center;
text-decoration: none;
}
body{
text-align:center;
}
#header {
position: relative;
text-align:center;
}
ul {
height: auto;
}
li {
display: inline-block;
border: 2px solid rgb(73, 73, 73);
padding-top: 1.562em;
padding-bottom: 1.562em;
padding-left: 6.25em;
padding-right: 6.25em;
border-radius: 5px 5px;
background-color: #FFFFFF;
}
<div id="header">
<div id="navbar">
<ul>
<li>Me
</li>
<li>Work
</li>
<li>Contact
</li>
</ul>
</div>
</div>
fiddle : http://jsfiddle.net/PrakharThakur/ksfqv5bf/embedded/result/