Centering div's in CSS uses a set width and margin: X auto;
The TwentyEleven theme has the site title wrapped inside the header div.
<div id="page" class="hfeed">
is styled with a max-width of 1000 pixels.
This same wrapper also contains the rest of your page.
If you wish to let your header title get a 100% width, the easiest way is to edit the header template file and make a new wrapper for this part of your layout.
I would make something like:
<div class="headerWrapper">.. put your code here</div>
Then you have to define it in the css-file:
You should also remove the padding in the body (look in style.css or override it with !important )