Center page to make it responsive

[Es Nimbus]

I am trying to center this page. I used a tutorial to make the website responsive and kind of went my own way with the CSS. Now I cant center it properly and when the screen is very small everything get messed up. you will have to minimize the windows to a minimum to see the problem, There is a large amount of white space on the right, and things get on top of each other.

http://www.bindjacorporation.com

[wahhabb]

Your .container class has float:left and padding:50px. Because of the float, the padding doesn’t do what you expect. Here’s a quote from a useful tutorial:

[F]loating elements can overlap with the margin, border and padding areas of other elements … when the floating element is wider or higher than the element it is inside.

In short, any time your floated element is larger than its container, it will appear to overflow that container. I say “appear” because, as we established earlier, floats exist outside the normal document flow like positioned elements. They’re not contributing to the height of their container at all. The height of the container in our example is being decided by the paragraph’s contents.

Read more at http://www.cssnewbie.com/css-float-property/#.U7o1h5RdXhs

[Author]

Posts