title: CSS prevents links from acting like links
body: <p>I'm just getting started on HTML5 and CSS3 (working through The Odin Project) and the first project is to duplicate the Google homepage. I was able to get everything set up, but it seems like my CSS is somehow preventing my header links from acting like links. You can't click on them and the hover effects don't work.</p>
  
  <p>They work fine on my footer and my nav text-decoration is applied, so I'm not sure what's making it act like it's not a link. I've only tested it in Chrome, so I'm not even worried about compatability issues yet. Am I doing the HTML5 wrong? Or is it some kind of weird rule like you can't use hover effects with inline-block or something? I'm not familiar enough with it yet to have learned all those nuances yet...</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Google&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;nav&gt;
      &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" class="atext"&gt;+Mara&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="atext"&gt;Gmail&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="atext"&gt;Images&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="aicon"&gt;&lt;img src="images/options.png" width="35px"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="aicon"&gt;&lt;img src="images/bell.png" width="35px"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="aicon"&gt;&lt;img src="images/plus.png" width="35px"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/photo.jpg" width="40px" class="rounded_img"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div class="container"&gt;
  &lt;img class="logo" src="https://www.google.com/images/srpr/logo11w.png" width="320px"/&gt;
  
  &lt;center&gt;&lt;form action="#" method="post" name="google_search_form"&gt;
      &lt;input type="search" name="googlesearch" class="search"&gt;&lt;br/&gt;&lt;br/&gt;
      &lt;input type="submit" value="Google Search" class="button"&gt;
      &lt;input type="submit" value="I'm Feeling Lucky" class="button"&gt;
  &lt;/form&gt;&lt;/center&gt;
  &lt;/div&gt; &lt;!--End container--&gt;
  &lt;footer&gt;
      &lt;ul&gt;
      &lt;span class="left"&gt;&lt;li&gt;&lt;a href="#"&gt;Advertising&lt;/a&gt;&lt;/li&gt;&lt;/span&gt;
      &lt;span class="left"&gt;&lt;li&gt;&lt;a href="#"&gt;Business&lt;/a&gt;&lt;/li&gt;&lt;/span&gt;
      &lt;span class="left"&gt;&lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;&lt;/span&gt;
      &lt;span class="right"&gt;&lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;&lt;/span&gt;
      &lt;span class="right"&gt;&lt;li&gt;&lt;a href="#"&gt;Terms&lt;/a&gt;&lt;/li&gt;&lt;/span&gt;
      &lt;span class="right"&gt;&lt;li&gt;&lt;a href="#"&gt;Privacy&lt;/a&gt;&lt;/li&gt;&lt;/span&gt;
      &lt;/ul&gt;
  &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.container{
      position: relative;
      vertical-align: middle;
  }
  .logo {
      display: block;
      margin-left: auto;
      margin-right: auto;
      padding-top: 270px;
      clear: right;
  }
  .search {
      width: 650px;
      height: 35px;
      margin-top: 40px;
      font-size: 27px;
      background: url('images/voice.gif') 97% 50% no-repeat;
      opacity:0.6;
      background-size: 17px;
      border: blue solid 1px;
  
  }
  .button {
      font-family: Helvetica, Roboto, sans-serif;
      font-weight: bold;
      color: black;
      background: #f2f2f2;
      border: #d6d6d6 solid 1px;
      border-radius: 2px;
      width: 140px;
      height: 40px;
  }
  nav {
      width: 600px;
      height: 30px;
      font-size: 1em;
      font-family: Helvetica, Roboto, sans-serif;
      font-weight: lighter;
      text-align: center;
      position: relative;
      float: right;
  }
  nav ul {
      height: auto;
      padding: 0;
      margin: 0;
  }
  nav li {
      display: inline-block;
      padding: 10px;
      vertical-align: middle;
  }
  .atext {
      text-decoration: none;
      color: black;
  }
  .atext: hover {
      text-decoration: underline;
      background-color: yellow;
  }
  .aicon {
      opacity: 0.6;
  }
  .aicon:hover {
      opacity: 1.0;
  }
  footer {
      width: 102%;
      height: 40px;
      left: -20px;
      right: -20px;
      font-size: 1em;
      font-family: Arial, sans-serif;
      position: absolute;
      bottom: 0;
      background: #f2f2f2;
      border: #d6d6d6 solid 1px;
  }
  footer ul {
      height: auto;
      padding: 0;
      margin: 0;
  }
  footer li {
      display: table-cell;
      padding: 10px;
      vertical-align: middle;
  }
  footer li a {
      text-decoration: none;
      color: gray;
  }
  .left {
      float: left;
      margin-left: 20px;
  }
  .right {
      float: right;
      margin-right: 20px;
  }
  .rounded_img {
      border-radius: 20px;
  }
  </code></pre>
  
  <p>Any help will be greatly appreciated. Thanks!</p>
  
  <p>Oh, and I haven't even started on JavaScript yet, so I'd like to avoid JavaScript if possible!</p>
  
  <p>Here is a fiddle: <a href="http://jsfiddle.net/Lvfmwhvu/" rel="nofollow">http://jsfiddle.net/Lvfmwhvu/</a></p>