Little aligning/justifying issue

JessGVi

Howdy folks! I'm having a little aligning problem with a custom HTML/CSS block which I'm using for my header. Probably most people would never notice but it bugs the anal retentive side of me.

I have my NAME with PHOTOGRAPHY in a small font below it. I want photography to have the font tracking necessary to fill the width of my name (to appear justified). Hard to explain but you can see it on my site: http://gibsonvisuals.com

The problem I'm having is with the photography part, it will shift left or right based on the browser window size. It's subtle but enough to bother me.

I can fix it by text-aligning the HTML block to the left and increasing the letter-spacing of photography to match my name. The problem is when you look at the site on a mobile browser the whole block is justified to the left and isn't centered within the phone/tablet and looks kind of stupid.

So what I've done is centered it within the content block and adjusted the blocks margin to 22% (which is the exact size of my header at 1920px) thus making it appear justified and positioned to the left of the page. And I assume this is the problem since that 22% scales as the window shrinks and causes it to push the photography line left or right.

Anyway, my HTML for the content block:

<p class="small"><a href="http://gibsonvisuals.com"><span class="j">JESS</span>&nbsp;<span class="g">GIBSON</span><br />
  <span class="ph">PHOTOGRAPH</span><span class="py">Y</span></a></p>

And my CSS:

.j {
  font: 200 48px 'Roboto', sans-serif;
  color: #fff;
}

.g {
  font: 400 48px 'Roboto', sans-serif;
  color: #fff;
}

.ph {
  font: 300 12px 'Roboto', sans-serif;
  letter-spacing: 19.4px;
  color: #fff;
}

.py {
  font: 300 12px 'Roboto', sans-serif;
  color: #fff;
}

p.small {
  text-align: center;
  line-height: 1px;

And also, would it be possible to reduce the spacing between photography and my name? I tried using line-height in various ways and was able to achieve the look, but it seemed to reduce it for the whole block and brought the horizontal line block closer to the bottom of my header and sometimes even overlapping it.

Any help would be amazing, thanks!

Jess

Allen

Might have to set a static width for the p block.

....