Hey,

So i am new to web development and am just trying to copy making layouts of different sites to get better with CSS. Anyway I am trying to do htmldog.com layout and I am having a problem getting background color to one of my divs. The div that i cannot get color to is the id="main" div. Also if you see any other issues such as extremely sloppy coding, feel free to point it all out.

HTML

Code:
<body>
    <div id="dog_tag">
        <p>
            <em>
                <img src="doglogo.png" alt="HTML Dog" width="80" height="41">
            </em>
        </p>
    </div>
<div id="container">
    <header>
        <h1>HTML tutorials. And stuff.</h1>
        <p>Welcome to HTML Dog, the web designer’s resource for everything HTML, CSS, and JavaScript, the most common technologies used in making web pages.</p>
    </header><!-- End of Header -->
    <nav>
        <ul>
            <li> <h2><a href="">Tutorials</a></h2>
                <ul>
                    <li><a href="">HTML</a></li>
                    <li><a href="">CSS</a></li>
                    <li><a href="">JavaScript</a></li>
                </ul>
                
            </li>
            <li> <h2><a href="">References</a></h2>
                <ul>
                    <li><a href="">HTML Tags</a></li>
                    <li><a href="">CSS Properties</a></li>
                </ul>
            </li>
            <li><h2><a href="">Articles</a></h2></li>
            <li><h2><a href="">Examples</a></h2></li>
            <li>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About HTML Dog</a></li>
                    <li><a href="">Contact US</a></li>
                    <li><a href="">Link to HTML Dog</a></li>
                    <li><a href="">Site Map</a></li>
                </ul>
            </li>
            <!--<li>@htmldog</li>-->
        </ul>
    </nav><!-- End of Nav -->
    <div id="main">
        <h3>Tutorials</h3>
        <p><a href="">Quick and easy-to-follow practical guides</a> to get you up and running with HTML, CSS, and JavaScript, following best-practices every step of the way.</p>
        <h3>References</h3>
        <p><a href="">The reference section</a>, which is cross-linked from throughout HTML Dog, outlines the HTML tags and CSS properties available to you.</p>
        <h3>Examples</h3>
        <p><a href="">Bare-bone examples</a> complement the tutorials, references, and articles, and should help you to grasp how bits of HTML and CSS work a bit better by seeing them in action.</p>
    </div><!--End of Main-->
    <div id="new">
            <h3>All New Content</h3>
            <img src="five.png" alt="HTML 5" id="five" />
            <p><a href="">Coinciding with HTML Dog’s tenth year</a>, the site has been overhauled with its existing content updated and new guides added to incorporate HTML5, CSS3, and JavaScript.</p>
            <div id="link">
                <h4>Give a dog a link</h4>
                <p>Find the site useful? Link to it and we'll be your friend forever.</p>
            </div>
    </div>
    <!--End of new-->
    <footer>
        <ul>
            <h3>Popular Pages</h3>
            <li><a href="">HTML Beginner Tutorial</a>: No idea where to start? Try here!</li>
            <li><a href="">CSS Beginner Tutorial</a>: So, you can dabble in HTML but how do you make it look good?</li>
            <li><a href="">JavaScript Tutorials</a>: Programming! Wooo!</li>
        </ul>
    </footer><!--End of Footer-->
</div>
</body>
CSS

Code:
* {	
    text-decoration:none;
    margin:0;
    padding:0;
    border: 0;
    list-style:none;
    float:none;
    outline: 0;
    font-style: normal;
    border: none;
}
body {
    background-color: #435362;
}
/*Dog Tag*/
#dog_tag {
	position: fixed;
	left: 0;
	width: 100%;
	height: 5px;
        z-index: 40;
	background: #fff;
	box-shadow: 0 0 8px 2px rgba(0,0,0,.7);
}
	
#dog_tag a, #dog_tag em {
	position: absolute;
	z-index: 88;
	top: 0;
	left: 40px;
	width: 120px;
	margin: 0;
	background: #fff;
	height: 52px;
	text-align: center;
	padding-top: 15px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	box-shadow: 0 0 8px 2px rgba(0,0,0,.7);
}
#dog_tag a:hover { padding-top: 18px }
#dog_tag::before {
	content: "";
	position: absolute;
	z-index: 99;
	height: 5px;
	width: 180px;
	top: 0;
	left: 0;
	background: #fff;
}
#dog_tag a:hover span span { border-radius: 17px }

/*Container*/

#container {
    width: 1400px;
}

/*Nav*/
nav {
    float: left;
    width: 200px;
    background: #435362;
}
nav > ul {
    margin: 100px 40px 0 0;
    width: 200px;
    text-indent: 40px;
    font-family: 'Bree Serif', Georgia, serif;
}
nav ul ul {
    padding-bottom: 10px;
}
nav ul li {
    padding: 6px 0 6px 0;
}

nav h2 a{
    color: white;
}
nav ul ul li a {
    color: #77c4d7;
    font-size: .75em;
    font-weight: 700;
    font-family: arial;
}
nav ul h2:hover, ul li li:hover {
    background: #303d49;
}
nav ul ul li a:hover {
    color: white;
}

/*Header*/
header {
    background-color: #252524;
    float: right;
    width: 1200px;
    margin: 40px 0 0 0;
    border-radius: 3px 3px 0 0;
}
header > h1 {
    font-family: 'Bree Serif', Georgia, serif;
    font-size: 2.7em;
    color: white;
    padding: 30px 65px 0px 65px;
}
header > p {
    font-family: arial;
    font-size: .9em;
    color: white;
    padding: 10px 65px 40px 65px;
}
    
}
/*Main*/
#main {
    width: 1200px;
    padding: 20px;
    background-color: #ffffff;
}
#main h3 {
    color: #88bb22;
}
/*New*/
#new {
    background: #ee8800;
    width: 1200px;
}
/*Footer*/
footer {
    background-color: #252524;
    float: right;
    width:1200px;
}
Thanks in advance. Have been doing layouts all day and my brain cant see my mistake here. Might be a specificity error, but i cant see it. ALSO any other advice you can give someone starting out would be appreciated!!