CODEWITHSUNDEEP
htmlcssmargin
mshindal
mshindal

Reputation: 588

Negative margin, can't figure out where it's coming from

As the title says, I have no clue why I have a negative margin on my #content-bg div. It's creating an empty space on the right side of my page that I don't want. Any ideas?

Site is: http://napkinhouse.com/tms

Upvotes: 0

Views: 46

Answers (3)

Rolchau
Rolchau

Reputation: 114

You already have a * { } rule...add this to it:

* {
-webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
     -moz-box-sizing: border-box; /* Firefox 1+ */
          box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
}

With that you don't have to worry about the weird box-model where padding adds to the width - so if you set width: 300px and padding: 10px to an element, the width really IS 300px and not 320px.

Upvotes: 1

Huangism
Huangism

Reputation: 16438

Remove padding on #content

Your width is set to 100% on content and then you pad it 3em so it is more than 100% total

if you want padding, you can try setting the #content width to 96% and setting padding left/right to 2% or something similar(if you are trying to make the padding shrink/expand with the page). You can also remove the width 100% from content if you don't need the padding to be responsive.

Something else is on your page that's also making the horizontal scrollbar appear. It's #content-bg, you don't really need the width 100% on that either since it is already display block. Since you have width 100% + the border that's why it is giving you the horizontal scrollbar. Alternatively you can look into https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Upvotes: 2

Cristina Cristea
Cristina Cristea

Reputation: 566

Remove from your css from #content and #content-bg the width:100%

Upvotes: 1

Related Questions