CSS3 List Navigation Not Floating to Left - html

I was doing a tutorial on tuts+ premium when the person who uploaded the series did not upload an exercise file. When I copied everything from his tutorial video into a CSS document EXACTLY, the CSS list items won't float left. I tried and tried everything but I couldn't. Here is the HTML:
<!doctype HTML>
<html>
<head>
<title>CSS3 Transitions</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/lesson02.css" />
</head>
<body>
<nav class="main-nav">
<ul class="top-nav">
<li>home</li>
<li>about</li>
<li>products</li>
<li>contact</li>
</ul>
</nav>
</body>
And the copied CSS code from the tutorial:
/********** TOP NAV *************/
nav.main-nav {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
width: 100%
}
.top-nav {
border-bottom: 2px solid #111;
height: 30px;
list-style-type: none;
margin: 0;
padding-left: 0;
width: 100px;
}
.top-nav li {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
border-bottom: 2px solid #111;
border-right: 1px solid #555;
float: left;
font-size: 14px;
height: 20px;
padding-top: 10px;
position: relative;
text-align: center;
width: 150px;
}
.top-nav li a {
color: #aaa;
padding-top: 5px;
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 25px;
text-decoration: none;
}
The other CSS file can be found here which was found on the tuts+ premium tutorial too: Normalize CSS v2.1.1
Please I need help if anyone


The menu items are indeed floated, however, their parent container is restricted to a width of 100px thus making them wrap under each other.
Just remove width: 100px from .top-nav
/********** TOP NAV *************/
nav.main-nav {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
width: 100%
}
.top-nav {
border-bottom: 2px solid #111;
height: 30px;
list-style-type: none;
margin: 0;
padding-left: 0;
}
.top-nav li {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
border-bottom: 2px solid #111;
border-right: 1px solid #555;
float: left;
font-size: 14px;
height: 20px;
padding-top: 10px;
position: relative;
text-align: center;
width: 150px;
}
.top-nav li a {
color: #aaa;
padding-top: 5px;
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 25px;
text-decoration: none;
}
<nav class="main-nav">
<ul class="top-nav">
<li>home</li>
<li>about</li>
<li>products</li>
<li>contact</li>
</ul>
</nav>

Related

Responsive span reposition background

I have three buttons, same height and width, with text and background icons on the right. For smaller screens and single words, I would like to relocate the icons to the bottom center of the button. Is there a way to do that on CSS? I already tried all background-position possibilities, but i guess is not the solution.
html {font-family:Verdana, sans-serif; }
a {text-decoration:none; color: #fff; font-size: 28px;}
.head {display:flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
justify-content: center;
padding: 5rem 0rem 0rem 0rem;
flex-grow: 1; flex-basis: 10%;}
.items {width: 20%;
margin:1rem;
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
color: #ffffff;
padding: 10px 10px 10px 10px;
text-decoration: none;
text-align:center;
float:left;
font-size:30px;
font-weight:100;
}
.items.cli {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#3498db', EndColorStr='#2980b9');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#3498db', EndColorStr='#2980b9')";
}
.items.lab {
background: #5669ce;
background-image: -webkit-linear-gradient(top, #5669ce, #3848a1);
background-image: -moz-linear-gradient(top, #5669ce, #3848a1);
background-image: -ms-linear-gradient(top, #5669ce, #3848a1);
background-image: -o-linear-gradient(top, #5669ce, #3848a1);
background-image: linear-gradient(to bottom, #5669ce, #3848a1);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#5669ce', EndColorStr='#3848a1');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#5669ce', EndColorStr='#3848a1')";
}
.items.cat {
background: #46b76b;
background-image: -webkit-linear-gradient(top, #61a778, #2f7f49);
background-image: -moz-linear-gradient(top, #61a778, #2f7f49);
background-image: -ms-linear-gradient(top, #61a778, #2f7f49);
background-image: -o-linear-gradient(top, #61a778, #2f7f49);
background-image: linear-gradient(to bottom, #61a778, #2f7f49);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#61a778', EndColorStr='#2f7f49');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#61a778', EndColorStr='#2f7f49')";
}
.items.icon.cli span{
padding-right: 40px;
background: url(http://2.gravatar.com/avatar/8cabfaad34005e38ba1b9f05759d1e59?s=40&d=retro&r=g) no-repeat 0px;
background-size: 32px 32px;
background-origin:padding-box;
background-position:bottom right;
}
.items.icon.labo span{
padding-right: 40px;
background: url(http://0.gravatar.com/avatar/9f0ff6a662bd596a880212a3f47aa202?s=40&d=mm&r=g) no-repeat 0px;
background-size: 32px 32px;
background-origin:padding-box;
background-position:bottom right;
}
.items.icon.cata span{
padding-right:50px;
background: url(https://www.boxful.com/images/promo/xpromoCrossBoxfulGreen.png.pagespeed.ic.qY6WwgnbmD.png) no-repeat 0px;
background-size: 32px 32px;
background-origin:padding-box;
background-position:bottom right;
}
.itemscabecera a {margin: 0px; display: block; width: 100%; height: 100%;}
<section class="head">
<div class="items cli icon cli">
<span>Goodtimes</span></div>
<div class="items lab icon labo"><span>Wintersnow</span></div>
<div class="items cat icon cata"><a href="#">
<span>Spring is here</span></a></div>
</section>

It's easier if you add the icons into your item div as actual image elements and not backgrounds, as I've done below. You also need to be aware that you're mixing % widths with fixed font sizes which means your text spills out of your container in my solution below.
html {font-family:Verdana, sans-serif; }
a {text-decoration:none; color: #fff; font-size: 28px;}
.head {display:flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
justify-content: center;
padding: 5rem 0rem 0rem 0rem;
flex-grow: 1; flex-basis: 10%;}
.items {width: 20%;
margin:1rem;
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
color: #ffffff;
padding: 10px 10px 10px 10px;
text-decoration: none;
text-align:center;
float:left;
font-size:30px;
font-weight:100;
}
.items.cli {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#3498db', EndColorStr='#2980b9');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#3498db', EndColorStr='#2980b9')";
}
.items.lab {
background: #5669ce;
background-image: -webkit-linear-gradient(top, #5669ce, #3848a1);
background-image: -moz-linear-gradient(top, #5669ce, #3848a1);
background-image: -ms-linear-gradient(top, #5669ce, #3848a1);
background-image: -o-linear-gradient(top, #5669ce, #3848a1);
background-image: linear-gradient(to bottom, #5669ce, #3848a1);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#5669ce', EndColorStr='#3848a1');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#5669ce', EndColorStr='#3848a1')";
}
.items.cat {
background: #46b76b;
background-image: -webkit-linear-gradient(top, #61a778, #2f7f49);
background-image: -moz-linear-gradient(top, #61a778, #2f7f49);
background-image: -ms-linear-gradient(top, #61a778, #2f7f49);
background-image: -o-linear-gradient(top, #61a778, #2f7f49);
background-image: linear-gradient(to bottom, #61a778, #2f7f49);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#61a778', EndColorStr='#2f7f49');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#61a778', EndColorStr='#2f7f49')";
}
.items.icon.cli span{
padding-right: 40px;
}
.items.icon.labo span{
padding-right: 40px;
}
.items.icon.cata span{
padding-right:50px;
}
.itemscabecera a {margin: 0px; display: block; width: 100%; height: 100%;}
<section class="head">
<div class="items cli icon cli">
<span>Goodtimes</span>
<img src="https://www.boxful.com/images/promo/xpromoCrossBoxfulGreen.png.pagespeed.ic.qY6WwgnbmD.png"/></div>
<div class="items lab icon labo"><span>Wintersnow</span><img src="https://www.boxful.com/images/promo/xpromoCrossBoxfulGreen.png.pagespeed.ic.qY6WwgnbmD.png"/></div>
<div class="items cat icon cata"><a href="#">
<span>Spring is here</span></a><img src="https://www.boxful.com/images/promo/xpromoCrossBoxfulGreen.png.pagespeed.ic.qY6WwgnbmD.png"/></div>
</section>

overflow-x ruining my dropdown navbar

My overflow-x: hidden; from the code ruins my dropdown bar.
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
I think this should be fixable with an overflow-x: visible; somewhere but I can't find out where to make it work.
I also can't delete it or my website will do this:
When it should be like this:
I got a code snippet to show it (it's a lot of code but I don't know what code is usefull and what not so I put most of it on here)
* {
margin: 0;
padding: 0;
border: 0;
}
html, body {
width: 100%;
height: 100%;
overflow-x: hidden; //The problem
}
.navbar ul {
list-style-type: none;
border-radius: 5px 0 5px 5px;
overflow: hidden;
background: #EEEEEE;
background: -moz-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #d8d7d3));
background: -webkit-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: linear-gradient(to bottom, #f5f5f5 0%, #d8d7d3 100%);
height: 45px;
-moz-border-radius: 5px 0 5px 5px;
-webkit-border-radius: 5px 0 5px 5px;
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
box-shadow: 0 -2px 2px rgba(105, 105, 105, 0.12) inset;
}
.navbar li {
float: left;
max-width: 1200px;
width: 15%;
}
.navbar li a {
display: block;
color: #000000;
text-align: center;
padding: 14px 2em;
text-decoration: none;
border-right: 1px solid #c8c8c8;
}
.navbar li a.active {
color: #eb800e;
background-color: rgba(255, 255, 255, 0.2);
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
}
.navbar li .dropdown-content a {
padding: 14px 0;
}
.navbar li a:hover {
color: #eb670c;
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
background-color: rgba(255, 255, 255, 0.2);
}
li .dropdown-content a:hover {
background: #EEEEEE;
background: -moz-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #d8d7d3));
background: -webkit-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: linear-gradient(to bottom, #f5f5f5 0%, #d8d7d3 100%);
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
}
.dropdown:hover .dropdown-content {
display: block;
}
li.dropdown {
display: inline-block;
width: 165px;
}
.dropdown-content {
display: none;
position: absolute;
background: #EEEEEE;
background: -moz-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e8e7e3));
background: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: linear-gradient(to bottom, #f5f5f5 0%, #e8e7e3 100%);
border-right: 1px solid #CBCACA;
width: 165px;
margin-top: -3px;
}
.dropdown-content a {
color: black;
padding: 12px 0;
text-decoration: none;
display: block;
text-align: center;
white-space: nowrap;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.block_for_scroll{
height: 85%;
}
<div class="navbar">
<nav>
<ul>
<li class="dropdown">
Artikelen ▼
<div class="dropdown-content" id="myDropdown">
Displays
Manden
Signing
</div>
</li>
<li>Home
</li>
<li>Vision
</li>
<li>Clubrax
</li>
<li>Over ons
</li>
<li>Contact
</li>
</ul>
<br class="ClearLeft">
</nav>
</div>
<div class="block_for_scroll"></div>
first hover over and it works fine, then scroll down and hover over it and you see it goes wrong. Dont expand the snippet.
Update
picture for the answer of Jack Goodman
Header going over screen
Update
Explaining the fiddle
If your scrolled down:
Does this only happen by my fiddle?

change the "li.dropdown" css like this:
float: left;
width: 25%;

So I found the answer (finally) myself,
I removed the overflow-x from the body (which I did because I had the same problem as White space showing up on right side of page when background image should extend full length of page) and placed the overflow-x in article only (got my code splitted into header-article-footer) then the navbar still works and the code works just fine also on mobile devices.

Nav bar won't render correctly

My Navigation bar seems to extend out further than where the rest of my page stops. See my code within a JSfiddle with what's happening here. I can't seem to figure out why this is happening.
HTML:
<div id="header-wrapper">
<center>
<img src="images/logo.png" alt=""/>
</center>
<div class="container">
<div class="row">
<div class="12u">
<header id="header">
<nav id="nav">
<i class="fa fa-home"></i>&nbsp Home
<i class="fa fa-flag-o"></i>&nbsp RFP Recap '14-'15
<i class="fa fa-database"></i>&nbsp Archived Updates
<i class="fa fa-phone"></i>&nbsp Contact Us
<i class="fa fa-folder-open-o"></i>&nbsp Member Contacts
<i class="fa fa-sign-in"></i>&nbsp Log In
</nav>
</header>
</div>
</div>
</div>
</div>
CSS:
/* Header */
#header-wrapper {
background-color: #007294;
background-image: -moz-linear-gradient(top, #008dab, #007294);
background-image: -webkit-linear-gradient(top, #008dab, #007294);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab), to(#007294));
background-image: -ms-linear-gradient(top, #008dab, #007294);
background-image: -o-linear-gradient(top, #008dab, #007294);
background-image: linear-gradient(top, #008dab, #007294);
}
#header {
position: relative;
border-radius: 10px;
border: solid 1px #006e8b;
box-shadow: inset 0px 0px 0px 1px #12a0bf, 0px 1px 4px 0px rgba(0,0,0,0.10);
background-color: #007b9d;
background-image: -moz-linear-gradient(top, #008ead, #007b9d);
background-image: -webkit-linear-gradient(top, #008ead, #007b9d);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008ead), to(#007b9d));
background-image: -ms-linear-gradient(top, #008ead, #007b9d);
background-image: -o-linear-gradient(top, #008ead, #007b9d);
background-image: linear-gradient(top, #008ead, #007b9d);
height: 86px;
width: 1200px;
margin-top: 0%;
margin-right: 0;
margin-bottom: 2.5%;
margin-left: 0;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
}
#header h1 {
position: absolute;
left: 0px;
top: 10px;
color: #fff;
font-size: 2.4em;
letter-spacing: -2px;
line-height: 86px;
}
#header h1 a {
color: #fff;
text-decoration: none;
}
#header nav {
position: absolute;
right: 40px;
top: 1px;
line-height: 84px;
text-transform: ;
font-size: 1.3em;
letter-spacing: -1px;
width: 1066px;
height: 92px;
}
#header nav a {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 0 25px 0 25px;
outline: 0;
}
#header nav a.current-page-item {
background-color: #007897;
background-image: -moz-linear-gradient(top, #007b99, #007897);
background-image: -webkit-linear-gradient(top, #007b99, #007897);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007b99), to(#007897));
background-image: -ms-linear-gradient(top, #007b99, #007897);
background-image: -o-linear-gradient(top, #007b99, #007897);
background-image: linear-gradient(top, #007b99, #007897);
box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.1), 0px 0px 5px 1px rgba(255,255,255,0.1);
}
#header nav a:hover {
background-color: #0882a1;
background-image: -moz-linear-gradient(top, #0782a0, #077d9b);
background-image: -webkit-linear-gradient(top, #0782a0, #077d9b);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0782a0), to(#077d9b));
background-image: -ms-linear-gradient(top, #0782a0, #077d9b);
background-image: -o-linear-gradient(top, #0782a0, #077d9b);
background-image: linear-gradient(top, #0782a0, #077d9b);
box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.05), 0px 0px 5px 1px rgba(255,255,255,0.05);
}

You are missing value for css in line 80:
text-transform: ;
Plus html entities like $nbsp have ; at the end $nbsp;

Set body tag to:
body{
position:relative;
margin:0 auto;
width:1200px;
}
Next give #header-wrapper & #header WIDTH of 100%
#header-wrapper,#header{
width:100%;
}
This should keep your #header inside of your Wrapper, and Wrapper should remain inside of your Body.
/== TAB TEXT ==/
Try replacing your #header nav a with this
#header nav a {
float:left; <!-- Changed from display:inline-block; -->
text-decoration: none;
color: #fff;
padding: 0px 0px 0px 10px; <!-- changed from 0px 25px 0px 25px-->
outline: 0;
}

Navigation text interfering with regular?

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>

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.

Navigation UL/LI additional space

It's one of those days and I can not figure out why I'm getting a space to the left of each of the LI tags in the following code. If you hover over, the menu items you'll see what I mean.
http://jsfiddle.net/midnitesonnet/C2Dub/
<div id="wrapper">
<div id="menu">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>

I can not figure out why I'm getting a space to the left of each of the LI tags
Because you format them with display:inline-block - and have whitespace between the tags. That's basic "HTML behavior", that any whitespace between two inline(-block) elements is condensed to one space character when displayed.
Either float the LI instead, or write them without whitespace between the tags, meaning ...</li><li>...

try this
http://jsfiddle.net/C2Dub/4/
/* CSS Document */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
margin-top: 0px;
background-color: #f5f5f5;
}
#wrapper {
background-color: #ffffff;
width: 1000px;
margin: auto;
-webkit-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
-moz-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
/*-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;*/
}
#menu {
background: #505050;
background: -moz-linear-gradient(top, #505050 0%, #343434 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(50%,#343434));
background: -webkit-linear-gradient(top, #505050 0%,#343434 50%);
background: -o-linear-gradient(top, #505050 0%,#343434 50%);
background: -ms-linear-gradient(top, #505050 0%,#343434 50%);
background: linear-gradient(to bottom, #505050 0%,#343434 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#343434',GradientType=0 );
min-height: 26px;
color: #CCC;
}
#menu ul {
display: block;
height: 39px;
list-style: none outside none;
margin: 0;
padding: 0;
}
#menu li {
margin: 0;
display: inline-block;
height: 39px;
border-right: 1px solid rgb(0, 0, 0);
padding: 0px 20px !important;
line-height: 39px;
list-style: none;
float:left;
}
#menu li a {
display: inline-block;
width: 99%;
color: #CCC;
text-decoration: none;
}
#menu li:hover {
background: #6b6b6b;
background: -moz-linear-gradient(top, #6b6b6b 0%, #4c4c4c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b6b6b), color-stop(100%,#4c4c4c));
background: -webkit-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: -o-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: -ms-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: linear-gradient(to bottom, #6b6b6b 0%,#4c4c4c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b6b6b', endColorstr='#4c4c4c',GradientType=0 );
}
#content {
min-height: 600px;
padding: 5px;
}
#footer {
min-height: 50px;
background: #f4f7f5;
background: -moz-linear-gradient(top, #f4f7f5 0%, #edf5f7 37%, #d3e8e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f7f5), color-stop(37%,#edf5f7), color-stop(100%,#d3e8e6));
background: -webkit-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: -o-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: -ms-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: linear-gradient(to bottom, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f7f5', endColorstr='#d3e8e6',GradientType=0 );
border-top: 1px #D2D2D2 solid;
}

This seems to work, I floated your li's, removed some padding and changed the height of the menu: http://jsfiddle.net/C2Dub/5/
#menu {
background: #505050;
background: -moz-linear-gradient(top, #505050 0%, #343434 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(50%,#343434));
background: -webkit-linear-gradient(top, #505050 0%,#343434 50%);
background: -o-linear-gradient(top, #505050 0%,#343434 50%);
background: -ms-linear-gradient(top, #505050 0%,#343434 50%);
background: linear-gradient(to bottom, #505050 0%,#343434 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#343434',GradientType=0 );
min-height: 39px;
color: #CCC;
}
#menu ul {
display: block;
padding: 0;
margin: 0;
list-style: none;
}
#menu li {
margin: 0;
float: left;
height: 19px;
border-right: 1px solid rgb(0, 0, 0);
padding: 10px 20px !important;
list-style: none;
}

U have some whitespace characters between your HTML code try to put the li tags on eachtoher:
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
This solved the problem in the Fiddle.