Fixed width spilling over container


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...

Thanks for any help! It's much appreciated!

Problem courtesy of: ironmike


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:

  width:95%;      /*dont give width as 100% */
  margin:0 auto;  /* for center alignment purpose */
  background-color: fuchsia;
  height: 50px;      
  position: fixed;
Solution courtesy of: Mr_Green -


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.