Padding for the body element has increased values

Question

I am trying to make it so that i can get my body section in the middle of the page using padding etc. However for some reason the box it self is not going in the middle. I am not sure if i am doing it in the right way but when you see the code. The main bit is called "section" This is my main body where i will have all the text etc.

Main Code:

http://codepen.io/Blindeagle141/pen/mVpYyM

As you can see. The blue box is still on the left hand side. I need it to be in the center of the page just like this:

  -----------------------------------------------
|    |                                 |       |                    
|-----------------------------------------------                        
|    |Logo                      Nav Bar|       |
|-----------------------------------------------                        
|    |                                 |       |                   
|    |                                 |       |                    
|    |               Body              |       |                
|    |                                 |       |                    
|    |                                 |       |                    
|-----------------------------------------------                        
|    |Logo                        Info |       |
|-----------------------------------------------                        
|    |                                 |       |                    
 -----------------------------------------------

Answer 1

To center your div horizontally replace the padding property with margin: 0px auto

If you want it to be below the header, you also need to specify the vertical margin, for example margin: 150px auto 0px auto

Basically, padding moves the markup INSIDE the div, so background color will still span the padding. If you want to move the entire div's bounds, use margin. This is called the box model, use it as a reference for positioning.

Answer 2

First thing that we need to check is the usage of padding, it is used to set the distance of the content to the border of the element, here:

<section>
  <p>Body</p>
</section>

padding will set the distance of <p>body</p> to the element <section></section>. what we want is to set the distance of <section></section> to its parent so instead of padding use margin like so:

section{
    background-color: cornflowerblue;
    height: 100px;
    width: 200px;
    margin: 0 auto;
}

this will put the <section></section> element in the center.