I am new to html 5 and I am learning this, the problem which i faced is section is not applying my given class I dont know what is the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header role="banner">
<hgroup class="main_container">
<h1 id="logo"></h1>
</hgroup>
</header>
<nav>
<ul class="main_container">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Initatives</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">Green Homes</a></li>
<li><a href="#">Renewble Energy</a></li>
<li><a href="#">Global Warming</a></li>
<li><a href="#">Lives</a></li>
</ul>
</nav>
<section class="main_container">
<h1>Why this kolaveri dee? </h1>
</section>
</body>
</html>
======css====
body
{
margin:0;
background:#F6F5F1;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
h1
{
margin:0;
}
.main_container
{
width:950px;
margin:0 auto;
}
header
{
background:#fdf7e7;
padding:10px;
}
#logo
{
background:url(../images/logo.jpg);
height:72px;
width:302px;
}
nav
{
background:#e9ebb0;
height:41px;
border-bottom:1px solid #c4c297;
}
nav ul
{
list-style:none;
background:#577a70;
height:31px;
text-align:center;
margin:0;
padding-top:10px;
border-bottom:1px solid #3c4852;
}
nav ul li
{
float:left;
}
nav a
{
text-decoration:none;
color:#ffffff;
padding:0 20px 0 0;
margin-right:20px;
border-right:1px dotted white;
}
nav li:last-child a
{
border-right:none;
}
nav a:hover
{
color:#FFFF33;
}
section
{
height:200px;
clear:both;
padding:0;
margin:0 auto;
width:950px;
background:#577a70;
}
jsfiddle link > http://jsfiddle.net/LNAcV/5/
Edit : Everyone thanks for the help i restructured the whole thing and did not found the same issue again. something was wrong in my code I guess now its working fine.
Add
padding:0;
to the main_container class.
The problem are the generyc styles of the browser