Width 100% go outside body

[Nic727]

Hi,

 

I don't know what's wrong with my code and I checked it about 20 times now.

 

http://codepen.io/anon/pen/pyKZJj

 

I don't know why, but my navigation 100% is making everything weird. Why is it outisde body and even HTML element?

It seem like my padding is making weird stuffs to my width, but it's not suppose to. I'm currently basing my code on something already existing, so I don't know why it work on the other website and not the one I'm working on.

 

 

EDIT : Ok I fixed it by removing padding and added position absolute to img (logo).

navigation{
    position: absolute;
    /*padding:2em 2.5em;*/
    background:transparent;
    color:white;
    top:2em;/*added*/
    width:100%;
}

.logo{
    width: 50px;
    position:absolute;/*added*/
    left:2.5em;/*added*/
}
.nav{
    right:2.5em;
    top:1.2em;/*added*/
    text-transform: uppercase;
    position:absolute;
}
.menu{
    list-style: none;
}
.menu li{
display:inline-block;
margin-left:2.5em;
}

Now it work.

Edited April 20, 2016 by Nic727

[Ingolme]

According to the W3C box model, padding and borders are added on top of the width.