html - Align link left of div -

(i'll make 1 riddle since project private @ moment ;) )

i have navigation bar. contains 5 links. each 1 has padding: 1% ;, margin-right: 1%; , displayed display: inline-block;.

they encased in separate navigation div. trying align text (not padding!) in first link left side of div.

i.e. first link, first link, aligns left of containing div.

thanks in advance.

edit: link page: www.lennardboehnke.com

to align text of first link left of container (while retaining padding hover effect) can use first-child pseudo selector select first a , apply negative left margin equal amount of left padding offset it.

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 {     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/