How to centralise content on a website by wrapping it?

I have a website I am working I am struggling to center all of my content. Why won't the header center?

I tried the usual method of margin-left and right: auto; but it didn't work so I did the following by using this:

<div class="header-wrapper">

  <div id="wrap">
    <!---start wrap 960px--->

    <h1>TITLE</h1>

    <div class="box-full">

      <h2>Our Cloud Development</h2>
      <p>Welcome to company Feel free to follow us on twitter. We are a new company, focused on business development.</p>
      <div class="button">
        <a href="class=" learnmore ">Learn More</a>
    </div>

    </div>
    </div>
    </div> <!---end wrap 960px--->

But it is pushing to the right.

Solution

You have specified width of 960px for your .box-full <div>. Because you have also specified padding, you're extending beyond that 960px wrapper.

Change the width to: 960-30-30 = 900:

.box-full {
    background: none repeat scroll 0 0 #F2F2F2;
    border: 1px solid #CCCCCC;
    border-radius: 7px 7px 7px 7px;
    clear: both;
    left: 0;
    margin: 1cm auto 0;
    padding: 30px;
    position: relative;
    text-align: center;
    width: 900px;
}