SP 2010 main area padding cut off

Question

I have custom CSS for my SP collaboration site so that it has a fixed width and it's centered.

This code does that:

#s4-bodyContainer {
    width: 950px !important;
    height: 100% !important;
    min-height:100% !important;
    margin-left:auto;
    margin-right:auto;
}

I have a grey background so I added this code to give the main area a bit of padding (so the content isn't flush against the edge of the main area)

#s4-mainarea {
    background-color: white;
    padding-left: 15px;
    padding-right: 15px;
    width: 920px !important; 
    height: 100%;
} 

It works great, but the height doesn't go 100%. It works for roughly 1000 pixels and then it seems like the main area just cuts off. How do I force the main area and it's padding to keep going?

Screens:

Answer 1

Well then.. I spent hours looking for the answer, decided to ask here after pulling all my hair out, and I found the answer by playing around with the CSS!

For anyone who googles this topic, rejoice for I have the answer and I'm going to actually share it!

ANSWER: Don't put padding in #s4-mainarea, put it in .s4-ca! Here's all my CSS:

#s4-bodyContainer {
width: 950px !important;
height: 100% !important;
min-height:100% !important;
margin-left:auto;
margin-right:auto; }

body #s4-ribbonrow {
background-color:#cccccc; }

body.v4master {
overflow: visible;
    background-color:#cccccc; }

.ms-cui-ribbonTopBars {
    width: 950px !important;
    margin-left:auto;
    margin-right:auto; }

.ms-cui-ribbonTopBars > div {
    border-bottom:1px solid transparent !important;
    width: 950px !important; }

body #s4-ribboncont {
padding:0px;
background: url("") repeat-x 0px -30px; }

#s4-mainarea {
background-color: white;
width: 950px !important; 
height: 100%; }

#s4-leftpanel {
display: none !important;
visibility: hidden !important; }

.s4-ca {
margin-left: 0px !important;
padding-left: 15px;
padding-right: 15px; }