Est-il possible d'étirer les côtés individuels d'un div en CSS?

Question

J'ai une barre de navigation que je voudrais étirer sur toute la largeur du navigateur. Est-il possible d'étirer seulement le haut, juste à gauche de cette div de sorte qu'ils touchent les côtés du navigateur? Voici mon code en ce moment: HTML:

<div class="navigation"> 
<ul> 
    <a href="index.html"><li>Home</a></li> 
    <a href="about.html"><li>About</a></li> 
    <a href="contact.html"><li>Contact</a></li> 
</ul> 

CSS:

.navigation ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #B4ABAB; 
    width: 100%; 
    box-shadow: 3px 3px 2.5px grey; 
} 
.navigation li { 
    float: left; 
} 
.navigation li a { 
    display: block; 
    color: #000; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-size: 25px; 
} 

J'ai essayé la propriété background-size et le mettre à 100%, mais il n'a pas d'effet plus je peux » t éditer des côtés individuels avec ça. J'ai aussi essayé verticle-align: middle; Cependant, cela ne fonctionne pas non plus. Aucun conseil? Merci!

Answer 1

Vous devez définir les balises html et le corps pour indiquer que vous voulez une marge de 0.

body, 
html { 
    margin: 0; 
} 

Par défaut, votre navigateur a stylisation interne qui peut (et doit) être neutralisé.

https://jsfiddle.net/Lphggzf6/

Answer 2

.navigator { 
    position : fixed; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

probablement vous devriez garder votre navigateur fixe et le contenu défilable en son sein.