Question

My website container has a width of 95%. I’m trying to create a navigation which spans the full width of my container. It works fine until I add the ‘position: fixed;’ to the navigation, it then just ignores the container and spills outside the container.

below is my CSS code and a link to a picture.

#page {
width: 95%;
max-width: 1440px;
height: auto;
margin-left: auto;
margin-right: auto;
border: solid 1px #000;
}

.nav {
width: 100%;
background-color: fuchsia;
height: 50px;
    position: fixed;
}

.nav ul {
list-style: none;

}

.nav ul li {
float: left;
display: block;
padding: 5px;
background-color: fuchsia;
line-height: 40px;
}

Image of problem… https://i.stack.imgur.com/gjjSw.png

Thanks for any help! It’s much appreciated!

Answer 1

you are giving position:fixed which makes your navigation to come out of the parent div or element.

Add something like this in your navigation element:

.nav 
{
  width:95%;      /*dont give width as 100% */
  margin:0 auto;  /* for center alignment purpose */
  background-color: fuchsia;
  height: 50px;      
  position: fixed;
}