having issues with css element placement - css

Question

The grey element, a div with id of #banner is not meant to be sticking out, I gave all the elements inside the div containing the welcome to fusion box, red element, and banner a min-height which adds up to all the min-heights of the elements inside it (welcome to fusion cube, red element, banner).
Basically it's not meant to stick out and I just can't figure out why it is sticking out.
JsFiddle
Not really something productive to ask but I can't figure it out and it's stressful
#main-wrapper{
width: 80%;
height: calc(75.5% - 10px);
margin: 10px auto 0;
min-height: 250px;
}
#page-title {
height: 7%;
font-size: 1.8em;
text-align: center;
padding: 1px 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 35px;
}
#content-wrapper {
background: red;
height: 83%;
min-height: 160px;
}
#page-messages {
width: 100%;
height: 20%;
overflow: auto;
}
#banner {
height: 10%;
display: inline-block;
background: grey;
min-height: 55px;
}
footer {
height: 8%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.5%;
margin: 20px 0 0;
width: 100%;
display: block;
}

Answer 1

you defined #banner as an inline-block - is that intention? (= not spanning the whole width?). Your fiddle looks quite different from the screenshot you posted...
try making its position: absolute and bottom: 0px;, and give the parent element (#main-wrapper) position: relative, and also a margin-bottom as high as #banner, which prevents content to be hidden by #banner.
(edited, wrong name for parent element)