title: How do I make a Flat Design Menu bar?
body: <p>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:
  <a href="http://i.stack.imgur.com/KDvwo.png" rel="nofollow">http://i.stack.imgur.com/KDvwo.png</a></p>
  
  <p>But instead it looks like this:
  <a href="http://i.stack.imgur.com/Y1Ya8.png" rel="nofollow">http://i.stack.imgur.com/Y1Ya8.png</a></p>
  
  <p>Here is my code:</p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;div class="wrapper"&gt;
  &lt;header&gt;
  &lt;h1&gt;Colve&lt;/h1&gt;&lt;/div&gt;
  &lt;nav&gt;
  &lt;ul class="menu1"&gt;
  &lt;li&gt;&lt;a class="button" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="button" href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="button" href="#downloads"&gt;Downloads&lt;/a&gt;
  &lt;li&gt;&lt;a class="button" href="invasion.html"&gt;INVASION&lt;/a&gt;&lt;/li&gt;    
  &lt;/li&gt;&lt;li&gt;&lt;a class="button" href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/header&gt;
  &lt;section id="about"&gt;
  &lt;h1&gt;About-Colve&lt;/h1&gt;
  &lt;p&gt;Colve is a company that gives you the things you want in one place&lt;/p&gt;
  &lt;p&gt;Created by Bradley Beeke&lt;/p&gt;
  &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>CSS</h1>
  
  <pre><code>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; }
  </code></pre>
  
  <p>Please can you help me!</p>