First off, in the future, please post CSS questions to the client-side stuff forum. (I'll move this message, so don't sweat it.)

It looks like the H1 element is like this:
<h1 id="pageTitle"></h1>
And it's just a picture. I'm guessing that the H1 has a height, width, and a background.

You want this:
<h1 id="pageTitle">Secure Liberty</h1>

And you want it to look like this:

[    picture       ] Secure
[                  ] Liberty
[                  ]

Try this:

#pageTitle {
  padding:0 0 0 300px;
  text-align:left;
  background:whatever;
}

As for moving it over to the left, try adjusting the margins. margin:0; would be a good way to start. If you want to push the text around inside the H1, use the padding rule. (It may help to also use a border:1px solid red; while you're working on this, so that it's clear where the boundaries are.)

PS: Those 4-value properties work like this:
property: top right bottom left;
so, margin: 1px 2px 3px 0;
is the same as
margin-top:1px;
margin-right:2px;
margin-left:3px;
margin-bottom:0;
but it's just a lot less typing.

I'm trying to compare this to what I have now. What file is this I am changing, main.php or custom.css?

I have a #header in my main file.

What Isaac is showing will go in your css file - that's where you enhance or control the look of your page. Except for the part where you put "secure liberty" - that goes in your php file because it is content.

From your page after doing a view source:

<div class="pageHeader">
<h1 id="pageTitle"></h1>
<div class="pageSubTitle"></div>
</div>

The pageHeader thing and the pageTitle thing are defined in your css file, and those are the bits that are controlling your layout. The image apparently is a background image because it is not called for in the actual code. That means somewhere in either pageHeader or pageTitle you have a line that includes the name of that image. THAT is where you need to manipulate your css at. Hopefully it's in pageHeader so it can sit still while you push pageTitle around.

Do you have a copy of the image without the text on it? Otherwise there is no way to move the text. Suppose in your php file you added some text between the h1 tags like Isaac showed, and you add the padding stuff for your pageTitle. That will tell the browser "whatever this guy puts inside h1 tags with a class of pageTitle will be moved 300 pixels away from the left edge of the imaginary box called pageHeader".

That's what a div is - an imaginary box. Make it be real by adding a border. Add

border:1px solid red;

to your pageHeader and

border:1px solid green;

to your pageTitle to see what happens when you manipulate your padding values.

You will see a red box and a green box inside it. When your padding is set like Isaac showed the green box will be narrower than the red one. That's how you will be able to push your words around the screen. When you've got it pushed where you want it remove the border statements.

XHTML = branches holding content
CSS = flowers on the branches

The XHTML provides the "hooks" that the CSS rules attach themselves to.

You can put CSS in your XHTML file, wrapped in STYLE tags, or you can import rules from an external .css file. Either way, all of the rules cascade into one final set of directives.