CODEWITHSUNDEEP
htmlcss
MasonWinsauer
MasonWinsauer

Reputation: 673

CSS 100% Width Broken

I'm developing a PHP/HTML5/CSS3 page and have run into an issue. I somehow had this working perfectly then added some code, made some changes, and broke it.

The concept was that multiple portions of the page would be at 100% width, but with predefined heights. Now however, at width:100% it runs the full width, less 15-20 px (~1%). It has properties CSS stylings such as:

html {
width: 100%;
}

body{
background-color:#fbf9ec;
font-family:"Times New Roman", Times, serif;
width:100%;
}


#upperContainer{
height: 100px;
width: 875px;
margin: 0 auto;
position: relative;
}

#topLogo{
width: 250px;
height:75px;
background-image:url(../images/logo.png)
}

#nav{
background-image:url(../images/nav-bg.png);
height: 32px;
width: 100%;
margin-left:-10px;
background-repeat:repeat-x;
}

#featuredContent{
height: 336px;
width: 100%;
margin-left:-12px;
background-image:url(../images/featured-bg.png);
}

#sliderA{
background: #3a7c38;
height: 326px;
width: 873px;
margin: 0 auto;
padding: 10px 0 0 0;
border:1px #353f35;
border-right-style:solid;
border-left-style:solid;
position: relative;
}

Any thoughts?

Upvotes: 0

Views: 419

Answers (1)

MetalFrog
MetalFrog

Reputation: 10543

You have negative left margins set. Remove them and see if it lines up.

#nav{
    margin-left:-10px;
}

#featuredContent{
    margin-left:-12px;
}

Upvotes: 1

Related Questions