Mein Code produziert extra <a> Links

Ich bin mir nicht sicher warum, aber ich denke, etwas in meinem CSS erstellt Duplikate meines HTML-Codes. Ich bin ziemlich neu in CSS, also vermisse ich vielleicht etwas!Mein Code produziert extra <a> Links

Hier ist mein HTML:

<section class="once"> 
<div class="third" id="third"> 
<a href="http://69.195.124.168/~onceweso/?page_id=8" class="post" style="background-image: url(http://media.mydogspace.com.s3.amazonaws.com/wp-content/uploads/2013/08/puppy-500x350.jpg);"> 
<div class="post-overlay"> 
<div class="post-header"> 
<h2 class="homepage-title">The List</h2> 
</div> 
</div></a> 

<a href="http://69.195.124.168/~onceweso/?page_id=8" class="post" style="background-image: url(http://media.mydogspace.com.s3.amazonaws.com/wp-content/uploads/2013/08/puppy-500x350.jpg);"> 
<div class="post-overlay"> 
<div class="post-header"> 
<h2 class="homepage-title">The List</h2> 
</div> 
</div></a> 

<a href="http://69.195.124.168/~onceweso/?page_id=8" class="post" style="background-image: url(http://media.mydogspace.com.s3.amazonaws.com/wp-content/uploads/2013/08/puppy-500x350.jpg);"> 
<div class="post-overlay"> 
<div class="post-header"> 
<h2 class="homepage-title">The List</h2> 
</div> 
</div></a> 
</div> 
</section>

Und hier ist mein CSS:

* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 

section.once { 
    width: 100%; 
    position: relative; 
    float: left; 
    padding-bottom: 10px; 
    z-index: 2; 
} 

.third { 
    margin-top: -3.95%; 
} 

.third .post { 
    display: block; 
    width: 30.7%; 
    margin-top: 3.95%; 
    padding: 10%; 
    float: left; 
    position: relative; 
    background-size: cover; 
    background-position: center; 
} 

.post-header { 
    position: absolute; 
    right: 30px; 
    bottom: 30px; 
    left: 30px; 
    } 

.homepage-title { 
    font-size: 1.375em; 
    line-height: 120%; 
    font-weight: 700; 
    text-transform: uppercase; 
    color: #222; 
    word-break: break-word; 
    -ms-word-break: break-word; 
} 

.post-overlay { 
    background: rgba(0,0,0,0.75); 
    opacity: 0; 
} 

.post-header { 
    bottom: 35px; 
} 

::selection { 
    background: #444; 
    color: #FFF; 
}

Dies ist die URL mit Beispielbilder: http://69.195.124.168/~onceweso/?page_id=544 (Passwort: einmal)

meine Schließlich Ziel ist es, eine Textüberlagerung hinzuzufügen.

Vielen Dank!

Quelle

2016-04-13 Katie Raynolds