How do I remove the dash links between my buttons?

Question

I have a navigation bar here:

        <div id = "header">
        <h1 id = "title">  Max Atkins </h1>
        <a href = "http://users.aber.ac.uk/mta2/cs15020/Assignment">
            <div class = "headerButtons">  
                Home 
            </div> 
        </a>
        <a href = "http://users.aber.ac.uk/mta2/cs15020/Assignment/cv.html">
            <div class = "headerButtons"> 
                CV 
            </div>
        </a>
        <a href = "http://users.aber.ac.uk/mta2/cs15020/Assignment/coverletter.html">
            <div class = "headerButtons"> 
                Cover Letter
            </div>
        </a>
        <a href = "http://users.aber.ac.uk/mta2/cs15020/Assignment">
            <div class = "headerButtons"> 
                Write-Up
            </div>
        </a>
        <a href = "http://users.aber.ac.uk/mta2/wordpress">
            <div class = "headerButtons"> 
                WordPress 
            </div>
        </a>
        <a href = "http://users.aber.ac.uk/mta2/webshop/catalog">
            <div class = "headerButtons"> 
                WebShop
            </div>
        </a>
    </div>

This shows dashes between my buttons that I can also click on to send me to the links. Preview here: http://users.aber.ac.uk/mta2/cs15020/Assignment/ How do I get rid of these?

CSS ADDED:

#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;
}

Many thanks

Update: CodePen showing the problem.

Answer 1

the dash is actually an underlined space character, you can either remove the whitespace from your html markup or use following css

#header a {
    text-decoration:none;
}

Answer 2

Try this.

#header a{
   text-decoration:none;
}

CodePen

Answer 3

By default, your anchor tags (<a>...</a>) have a CSS property on most browsers:

text-decoration: underline;

What you see as a dash is actually some underlining of a space character that was "left over" between the <a> and the enclosed <div>.

Adding the following removes the dashes:

#header a {
    text-decoration: none;
}

See a fixed CodePen.