How do I make a Flat Design Menu bar? - css

Question

Hello I am trying to make a website but my menu bar is not doing what it should. This is what it should look like:
http://i.stack.imgur.com/KDvwo.png
But instead it looks like this:
http://i.stack.imgur.com/Y1Ya8.png
Here is my code:
HTML
<div class="wrapper">
<header>
<h1>Colve</h1></div>
<nav>
<ul class="menu1">
<li><a class="button" href="#">Home</a></li>
<li><a class="button" href="#about">About</a></li>
<li><a class="button" href="#downloads">Downloads</a>
<li><a class="button" href="invasion.html">INVASION</a></li>
</li><li><a class="button" href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h1>About-Colve</h1>
<p>Colve is a company that gives you the things you want in one place</p>
<p>Created by Bradley Beeke</p>
</section>
</div>
CSS
html {
font:12pt Lato, sans-serif;
min-height:100%;
background-image:linear-gradient(45deg,#3498db,#2ecc71);
}
body{margin:0px;}
header{
background-color:white;
Color: #FFDF00;
float:left;
padding-left:5px;
display:block;
}
nav {
background-color:white;
float:right;
padding-right:5px;
height:60px;
display:block;
width:100%;
float:right;
}
nav a {
text-decoration:none;
list-style:none;
color:#FFDF00;
font-size:20px;
padding:8px;
}
nav li:hover, a:hover {color:#998100;}
li{display:inline;}
section { margin-bottom: 1000px; padding-top: 150px; float: left; }
Please can you help me!

Answer 1

Working DEMO
<div class="wrapper">
<header>
<h1>Colve</h1> <!-- remove the </div> present here -->
<nav>
<ul class="menu1">
<li><a class="button" href="#">Home</a></li>
<li><a class="button" href="#about">About</a></li>
<li><a class="button" href="#downloads">Downloads</a>
<li><a class="button" href="invasion.html">INVASION</a></li>
</li><li><a class="button" href="contact.html">Contact</a></li>
</ul>
</nav>
In the nav css, make width to be auto
nav {
background-color:white;
float:right;
padding-right:5px;
height:60px;
display:block;
width:auto;
float:right;
}
Add width: 100%; in header {} because currently the header is not properly aligned.
The HTML is not well constructed. Please remove the extra and from the code.

Answer 2

Well, right off the bat your HTML is invalid.. I see two immediate problems.
First, the closing tag after your closing H1 tag cannot be there (it looks like that was just an accident anyway).
<div class="wrapper">
<header>
<h1>Colve</h1></div>
Second, the closing that starts this line doesn't make any sense.. Remove it.
</li><li><a class="button" href="contact.html">Contact</a></li>
Oh, I lied.. there's a 3rd.. There's no closing tag for this element.
<li><a class="button" href="#downloads">Downloads</a>
Other than that, your HTML looks fine to me at a quick look, but in the future you may want to bookmark this site:
http://validator.w3.org/#validate_by_input
After you correct those problems with your HTML, update your question if you're still having problems.