Navigation text interfering with regular? - html

Question

I'm not sure what's going on here, but I'm trying to get it so the "Welcome to blabla" is on the right side of my thead. But it seems to glitch out?
screenshot: http://i.imgur.com/mCGCE8B.png
CSS Code:
body {
background-image: url('images/bg.png');
background-repeat: repeat;
padding: 0px;
margin: 0 0;
}
.content {
max-width: 1200px;
height: 800px;
margin: 0px auto;
background: #B9B9B9;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
box-shadow: 0px 5px 5px #000;
}
#navBack {
max-width: 1200px;
height: 30px;
background: rgb(30,87,153);
background: rgb(69,72,77);
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
margin: 0px auto;
border-bottom: solid #424242;
}
#navBack ul {
list-style-type: none;
height: 80px;
max-width: 1200px;
margin: auto;
}
#navBack li {
list-style-type: none;
height: 80px;
width: 100px;
margin: 0;
text-align: center;
float: left;
}
#navBack ul a {
background-image: url(images/nav_sep.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 0px;
padding-left: 0px;
display: block;
line-height: 30px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #000;
}
#navBack ul a:hover {
color: #fff;
}
.copyright {
max-width: 1200px;
height: 30px;
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
margin: 0px auto;
border-top: solid #424242;
text-align: center;
line-height: 30px;
box-shadow: 0px 3px 3px #000;
}
.copyright a {
color: green;
}
#theadTitle {
max-width: 1200px;
height: 30px;
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
border-bottom: solid #424242;
}
#thead {
max-width: 1200px;
height: 400px;
background-color: #CBCBCB;
margin: 20px 20px;
box-shadow: 0px 0px 3px #000;
}
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Noszscape - Home</title>
<LINK href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="content">
<div id="navBack">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Play Now</li>
<li>Download</li>
<li>Vote</li>
<li>Donate</li>
</ul>
</div>
<div id="thead" style="width: 75%">
<div id="theadTitle" > Welcome to Naszscape! </div>
</div>
</div>
<div class="copyright">
<span style="font-style:italic"><strong>All rights reserved ©</span> <span style="color: skyblue">317 Delta Coder</span> <span style="font-style:italic">2014</strong></span>
</div>
</body>
</html>

Answer 1

You have an inline style of width: 75% which is pushing the text off the side.
I would remove that and the max-width: 1200px; and add text-align: right; to the #theadTitle element.
See this fiddle.