How to center content in a div in responsive skeleton?

Question

There are similar questions to this but none of them are solving this problem.

I have built my site using a skeleton framework (http://www.getskeleton.com). For some reason, when i try to apply padding or any margin greater than 5px to the content in the main div on the site, the text portion jumps below the image. I've tried using their "offset-by" classes but the same thing happens. I've tried using

margin:0 auto; on all divs in that section but to no avail. I've also tried using text-align:center; but that didn't work either (oddly, this only centers the h1 element in that section but nothing else...).

The other issue I'm having is that I want all the backgrounds to expand to fit the width of the browser window and all the content should remain in the center but that doesn't seem to work well with this layout. If I set the container div's width to 100% it does expand but I end up having to set all the column and offset-by classes to 100% as well and then that messes up the navigation, etc. I want to keep my layout how I have it now but I just want the backgrounds to expand (including footer height) and for all content to be centered.

Here is the screenshot of what it looks like in the browser: https://i.stack.imgur.com/OrRqn.png

Can anyone please take a look at the code and let me know what I should fix here? I've added my code on JSFiddle:http://jsfiddle.net/z9uVK/

Many thanks in advance!!

Answer 1

The skeleton is confusing the hell out of me, there is just so much going on... so I eliminated all CSS and added a few simple rules demonstrating the techniques I would use to code this behavior from scratch

Since you want the background color bands to extend beyond the container, I am setting the container to 100% and placing extra divs around each of header, main and footer. These have width 100% also. The width of #header, #main, footer is set to 960px by default and reduced with a media query. I have also set the columns and the headshot image to use percents instead of pixels. I also removed a couple inline style rules from the HTML because they were breaking this new code.

http://jsfiddle.net/W7wG3/1/

// part of my css:
.container{width:100%;}
#headerBin{ 
    background-color: white; 
    border-top: 15px solid #4d4d4d;
}

#header, footer, #main{
    width: 960px; 
    margin:auto; 
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    #header, footer, #main{
      width: 768px; 
      margin:auto; 
    }
}