How do you optimize navigation bar for resizing? - css

Question

I just started learning html and css about 6 days ago. I do it for a hour a day and I'm having a lot of fun with it. I try to figure most of the issue I have on my own, but I've been having troubles finding resources to fix this problem.
#import url(http://fonts.googleapis.com/css?family=Merriweather);
*
{
text-decoration: none;
box-sizing: border-box;
}
body
{
background-color: #ff9900;
font-family: 'Merriweather', serif;
}
#page
{
margin: -8px;
}
#wrapper
{
/*margin: 1px;*/
}
h2>a
{
margin: -25px;
float: left;
background-color: #ffde00;
color: #097054;
padding: 20px;
}
h2>a:hover
{
color: #ffde00;
transition: .5s ease;
background-color: #6599ff;
}
.container
{
padding: 6px;
padding-right: 50px;
padding-left: 20px;
text-align: center;
background-color: #097054;
}
ul li
{
background-color: #ffde00;
display: inline;
margin: 0 auto;
padding: 10px;
color: #097054;
font-weight: 900;
font-size: 14pt;
}
ul li:hover
{
transition: .5s ease;
background-color: #097054;
border-color: #25C1BC;
color: #ffde00;
}
#p1
{
color: #097054;
height: 25em;
width: 25em;
background-color: #097054;
margin-left: 8px;
margin-top: 20px;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
p
{
background-color: #ffde00;
padding: 20px;
margin-top: 8px;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#p1:hover;
{
/*background-color: #000000;*/
}
p:hover
{
height: -75%;
width: -75%;
padding-bottom: 3.8em;
box-shadow: -5px -5px 0px 0px #097054;
margin-top: 3em;
color: #ffde00;
background-color: #6599ff;
font-weight: 600;
}
Essentially what happens is that my navbar will become extremely disorganized after resizing. This causes links to overlap and look really awful.
Thank you for your time and consideration.
http://jsfiddle.net/JZ9LZ/

Answer 1

Add this .container{white-space: nowrap;}
This question has been asked before Disable line breaks using CSS

Answer 2

There's no way to solve your problem with only html/css as your li elements's width is minimum.
You should decrease the text font-size calculating it on the windows width, but this can be made only with javascript
My advice is to leave this page as before (as I imagine that is only for fun) and when you have good html/css skills you can start studying jQuery <- Very important for the UI