title: Why is the <a> tag not working?
body: <p>I am making a website for my school's rowing team, and I can't seem to get the links in the navigation bar to work. I've tried to switch the <code>&lt;p&gt;</code> and <code>&lt;a&gt;</code> tags around and change the <code>z-index</code> of the elements. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;header class="horizontalDiv"&gt;
      &lt;img src="http://www.computer-wallpaper-backgrounds.com/wallpaper/1680x1050/cool-backgrounds/water-ripples-background.jpg" id="headerPic"/&gt;
      &lt;div id="titleContainer"&gt;
          &lt;b&gt;&lt;p id="title"&gt;*** Crew Team&lt;/p&gt;&lt;/b&gt;
      &lt;/div&gt;
      &lt;div class="horizontalDiv" id="navigation"&gt;
          &lt;div class="nav" id="home"&gt;
              &lt;p&gt;&lt;a href="https://www.google.com/?gws_rd=ssl"&gt;Home&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="nav" id="rowingSeason"&gt;
              &lt;a&gt;&lt;p&gt;Rowing Season&lt;/p&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="nav" id="basicsOfCrew"&gt;
              &lt;a&gt;&lt;p&gt;Basics of Crew&lt;/p&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="nav" id="registration"&gt;
              &lt;a&gt;&lt;p&gt;Registration&lt;/p&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="nav" id="documents"&gt;
              &lt;a&gt;&lt;p&gt;Documents&lt;/p&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="nav" id="pictures"&gt;
              &lt;a&gt;&lt;p&gt;Pictures&lt;/p&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="nav" id="news"&gt;
              &lt;a&gt;&lt;p&gt;News&lt;/p&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="nav" id="boosters"&gt;
              &lt;a&gt;&lt;p&gt;Boosters&lt;/p&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.horizontalDiv {
       width: 104%;
  }
  header {
      height: 200px;
      border-bottom: 3.5px solid black;
      margin: -10px 0px 0px -10px;
  }
  #headerPic {
      width: 100%;
      height: 100%;
      z-index: 1;
      opacity: .5;
  }
  #title {
      color: #b91a2f;
      font-size: 30px;
      font-family: verdana;
  }
  #titleContainer {
      z-index: 100;
      margin-top: -170px;
      margin-left: 65px;
  }
  .nav {
      z-index: 99;
      height: 100%;
      width: 11.3%;
      margin: 15px 0px 0px -3px;
      display: inline-block;
      border-left: 3px solid black;
      border-right: 3px solid black;
  }
  .nav p {
      text-align: center;
      font-family: verdana;
      font-size: 16px;
      color: black;
  }
  </code></pre>
  
  <p>I just had the link go to google for right now.</p>