Padding problems causing parent div expansion!

[ThePragmatic]

Hey,

I am having some problems with a navigation I am creating.

Basically I have a parent header with a fixed width of 350px and my nav with a width of 100%.

Within my nav there are li elements which when I set the padding for (as the class named .nav-big) it seems to be basing off the full document rather than just the nav and therefore is expanding across the page – this is why the padding at the moment is;

header {
float: left;
width: 350px;
height: auto;
margin-top: 1%;
margin-right: 1%;
outline: 1px solid #000;
}

nav {
float: left;
margin: 0;
padding: 0;
width: 100%;
outline: 1px solid yellow;
}
nav ul{
position: relative;
list-style: none;
margin: 0;
padding: 0;
text-align:center;
}
nav ul li {
margin: 6% 0;
padding: 0;
display: block;
font-family: “Kalinga”;
font-size: 28pt;
color: #7f7f7f;
position: relative;
}

nav ul h3 {
outline: 1px solid red;
margin: 0;
padding-top: 10%;
line-height: 0;
font-size: 20pt;
z-index: 100
}
.nav-big {
margin: 0;
outline: 1px solid blue;
position: relative;
padding: 15% 20% 0 20%;
z-index: 1000
}

Thanks :)

[unasAquila]

I done this [codepen](http://codepen.io/unasAquila/pen/qsnky) and it seems to do exactly what your asking it to do in the css so could you replicate with a new codepen

[Author]

Posts