Выровнять ссылку слева от div

Question

(Я сделаю это как загадка, так как мой проект закрыт в данный момент;))

У меня есть панель навигации. Он содержит пять ссылок. Каждый из них имеет padding: 1% ;, margin-right: 1%; и отображается display: inline-block;.

Они заключены в отдельный разделитель навигации. То, что я пытаюсь сделать, - выровнять текст (не дополнение) в первой ссылке в левой части div.

Т.е. первая ссылка, но только первая ссылка, выравнивается слева от моего содержащего div.

Благодарим за любую помощь заранее.

EDIT: Ссылка на мою страницу: www.lennardboehnke.com

Answer 1

Чтобы выровнять текст вашего первого звена слева от контейнера (при сохранении отступов для эффекта парения), вы можете использовать first-child псевдо селектор, чтобы выбрать первый a и применить отрицательный левый margin, равный количеству левых padding, чтобы компенсировать его.

CSS:

body { 
    margin: 0; 
    padding: 0; 
    font-family: Helvetica, sans-serif; 
    font-weight: 100; 
    font-size: 1em; 
    line-height: 1.5; 
} 
.content { 
    width: 70%; 
    margin: 0 auto; 
    color: #818181; 
    text-align: justify; 
} 
.nav { 
    width: 100%; 
    margin: 5% 0; 
    padding: 0; 
} 
.nav a { 
    text-decoration: none; 
    color: cornflowerblue; 
    font-size: 1.5em; 
    text-transform: uppercase; 
    display: inline-block; 
    margin-right: 1%; 
    font-weight: 200; 
    padding: 0 1%; 
    transition: background 0.4s ease-in-out 0, color 0.4s ease-in-out 0; 
} 
.nav a:hover { 
    color: #ffffff; 
    background: cornflowerblue; 
} 
/*Negative margin applied here*/ 
.nav a:first-child { 
    margin-left: -1%; 
} 

HTML:

<div class="content"> 
    <div class="nav"> 
     <a href="index.php">Home</a> 
     <a href="aboutme.php">About Me</a> 
     <a href="blog.php">Blog</a> 
     <a href="work.php">Work</a> 
     <a href="contact.php">Contact</a> 
    </div> 
</div> 

JS Fiddle:http://jsfiddle.net/aobqzya0/