CSS自适应标题元素不是全宽

I have a fairly simplistic website that I have setup for a phone, tablet, and desktop. Using media queries to format the CSS accordingly. Challenge is the site is PHP based, dynamic, and doesn't use the full width of the screen. Page has two tables, side by side, left justified, each 500px in width. So my desktop for instance is 1388px wide. Centering the title makes it off center from the middle of the two tables. So I added:

.centering {width:1020px; padding-top:5px; border:0; margin-top:2px; text-align: center; font-size: 1.6em; font-family: Sans-serif; font-weight:bold;}

to the paragraph tag for the title on the top of the page. OK great, I just hard coded the placement. Have a .centering for each media query with various widths as the table widths vary per device. So it works, have one for desktop, one for the iPad landscape, one for iPad portrait (portrait tables adjust one on top, one underneath), various iPhone versions and some general ones. On the iPad landscape and desktop there is one problem.

I mentioned it was PHP and dynamic. A user can pass along in the PHP URL, that they do not want to see the second table. (ex. http://www.myurl.com/test.php?showsecond=0). Well that's great, however now I have one table of 500 pixels, and a title centered based on a width of 1020px. But the width is now only 500px. I tried loading various styles dynamically based on what was set, but for some reason when I load a style from file, as opposed to being in the physical page, it had some weirdness. Like extra space between two lines of text. Anyway, is there any suggestions how to deal with this title? Is there an element like a div or something I can place around the entire page, that will determine the current page width (based on content), and the title centered will automatically fit into it correctly without having to hard code width information for it? Especially with the dynamic changing width of a page even in the same orientation on the same device?

Here's some addition imagery as I guess I'm being told I write to much. On the desktop I have a webpagge with two pictures:

IF THE WEBSITE LET ME POST PICTURES, YOU WOULD SEE A LEFT JUSTIFIED TWO TABLES WITH A LOT OF WHITE SPACE ON THE RIGHT OF THE BROWSER WINDOW.

When the PHP is set thru the URL to not display the second table I get:

IF THE WEBSITE LET ME POST PICTURES, YOU WOULD SEE A LEFT JUSTIFIED SINGLE TABLES WITH A LOT MORE WHITE SPACE ON THE RIGHT OF THE BROWSER WINDOW.

As you would have seen, the title doesn't recenter based on the smaller content and the page doesn't use the full screen with so don't want it to center by "page width".

Here is my media query to do the initial center

<code><pre>    
@media only screen and (min-width : 1224px) 
{
    th { font-size: 1.6em; font-family:Sans-serif; }
    td { font-size: 1.65em; line-height: 1em; font-family:Sans-serif;}
    h1 { font-size: 1.75em; line-height: 1.5em; }
    h2 { font-size: 1.25em; }
    table { width: 500px; align: left; }
    .centering {width:1020px; padding-top:5px; 
                border:0; margin-top:2px; text-align: center; 
                font-size: 1.6em; font-family: Sans-serif; 
                font-weight:bold;}
}
</code></pre>

And my PHP to output the title:

echo "<p class='centering'>Pool Mining: " . strtoupper($obj['multiport']['mining']) . "</center></p>";

ThoughTs?

Thanks.

Set the style as:

<h1 style="text-align: center;">You title</h1>

If you think that browser fails to center your text then check your tables to be centered, if not check you glasses ;)