Text-Align: Center - Not Working

Question

I am trying to use text-align: center to align my name on my DJ website - http://www.jameswinfield.co.uk/v2.html#

However it isn't working. I have a kind of fix by using left: 30% but this looks very messy on thinner screens as my name then goes into two lines and obscures the next text section.

I have tried playing with display: block and margin: 0 auto but neither seem to be working.

 .james { color: #F235E9; font-size: 6.25em; position: fixed; left: 30%; top: 28%; text-transform: uppercase; font-family: Oswald; letter-spacing: 6px; } .und { color: #F235E9; font-size: 3.125em; position: fixed; left: 35%; top: 42%; text-transform: uppercase; font-family: Oswald; } 

 <div class="cen"> <div class="james"> <p>James Winfield</p> </div> <div class="und"> <p>Underground House DJ</p> </div> <ul id="ticker01"> <li><a href="https://www.mixcloud.com/jameswinfield/semi-detached-house/" target="_blank">New house mix released - 18 different house track from 18 different years</a> </li> <li><a href="https://www.facebook.com/events/1647401842148267/" target="_blank">Next DJing on 21st August at Purple Turtle - midnight to 2am (ish) - free entry as always</a> </li> <li><a href="http://www.residentadvisor.net/dj/jameswinfield/top10" target="_blank">May DJ chart uploaded</a> </li> <!-- eccetera --> </ul> </div> 

On a thinner screen, it looks very messy.

Answer 1

You are setting the position of your name using a "fixed" relation. Just use position: relative; and remove the fixed top and left attributes from the element. Then you can simply set the text-align to center.

In short:

color: #F235E9;
font-size: 6.25em;
text-transform: uppercase;
font-family: Oswald;
letter-spacing: 6px;
text-align: center;