Link nicht inline, weil in seinem eigenen div?

Question

Die Links wurden alle horizontal ausgerichtet, bis ich eines davon in ein eigenes Div setzte, um die Farbe zu ändern, wenn ich auf der Seite bin, auf die es verlinkt.

Jetzt kann ich ihn nicht dazu bringen, wieder in die Reihe zu gehen.

<div class="navigation"> 
    <a href="./productions.html">Mes productions</a> 
    <a href="./DJ.html">DJ</a> 
    <a target="_blank" href="./CV.pdf">Mon CV</a> 
    <div id="contact"> 
    <a href="./contact.html">Me contacter</a> 
    </div> 
</div> 

.navigation { 
    padding: 40px 0px; 
    position: relative; 
    text-align: center; 
    width: 100%; 
    font-size: 30px; 
} 

.navigation a { 
    background: black; 
    border: 1px solid grey; 
    border-radius: 7px; 
    color: white; 
    display: inline-block; 
    margin: 100px 35px; 
    padding: 14px; 
    text-decoration: none; 
    opacity: 0.75; 
    font-family: impact; 
} 

.navigation a:hover { 
    background: white; 
    border: 1px solid black; 
    color: black; 
} 

#contact a { 
    background: white !important; 
    color: black !important; 
    display: inline-block !important; 
} 

Answer 1

Sie müssen display: inline-block auf #contact setzen, nicht #contact a.