title: How do I remove the dash links between my buttons?
body: <p>I have a navigation bar here:</p>
  
  <pre><code>        &lt;div id = "header"&gt;
          &lt;h1 id = "title"&gt;  Max Atkins &lt;/h1&gt;
          &lt;a href = "http://users.aber.ac.uk/mta2/cs15020/Assignment"&gt;
              &lt;div class = "headerButtons"&gt;  
                  Home 
              &lt;/div&gt; 
          &lt;/a&gt;
          &lt;a href = "http://users.aber.ac.uk/mta2/cs15020/Assignment/cv.html"&gt;
              &lt;div class = "headerButtons"&gt; 
                  CV 
              &lt;/div&gt;
          &lt;/a&gt;
          &lt;a href = "http://users.aber.ac.uk/mta2/cs15020/Assignment/coverletter.html"&gt;
              &lt;div class = "headerButtons"&gt; 
                  Cover Letter
              &lt;/div&gt;
          &lt;/a&gt;
          &lt;a href = "http://users.aber.ac.uk/mta2/cs15020/Assignment"&gt;
              &lt;div class = "headerButtons"&gt; 
                  Write-Up
              &lt;/div&gt;
          &lt;/a&gt;
          &lt;a href = "http://users.aber.ac.uk/mta2/wordpress"&gt;
              &lt;div class = "headerButtons"&gt; 
                  WordPress 
              &lt;/div&gt;
          &lt;/a&gt;
          &lt;a href = "http://users.aber.ac.uk/mta2/webshop/catalog"&gt;
              &lt;div class = "headerButtons"&gt; 
                  WebShop
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This shows dashes between my buttons that I can also click on to send me to the links. Preview here: <a href="http://users.aber.ac.uk/mta2/cs15020/Assignment/" rel="nofollow">http://users.aber.ac.uk/mta2/cs15020/Assignment/</a>
  How do I get rid of these?</p>
  
  <p>CSS ADDED:</p>
  
  <pre><code>#header{
  height: 130px;
  background-color: #32313B;
  border: #39B1C6 5px solid;
  margin-bottom: 10px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  text-align: center;
  }
  
  #header{
  height: 130px;
  background-color: #32313B;
  border: #39B1C6 5px solid;
  margin-bottom: 10px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  text-align: center;
  }
  
  #title{
      font-family: Arial;
      color: #ababab;
      top: 20px;
  }
  
  .headerButtons{
      width: 10%;
      height: 25px;
      background-color: #6EC1C2;
      border: solid;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      display: inline-block;
      position: relative;
      font-family: Arial, #25242C;
      color: #333333;
      top: 10px;
      padding: 5px;
      margin-top: -20px;
      margin-left: 20px;
      margin-right: 20px;
  }
  
  
  #buttonDiv{
      text-align: center;
  }
  </code></pre>
  
  <p>Many thanks</p>
  
  <p><strong>Update:</strong> <a href="http://codepen.io/anon/pen/AoynK" rel="nofollow">CodePen</a> showing the problem.</p>