Untitled

<!DOCTYPE html>
<html lang:en>
<head>
<title>MitoGraphics | Branding and Promotions</title>
<link rel="stylesheet" href="main.css">
<link href='http://fonts.googleapis.com/css?family=Noto+Sans|Comfortaa:400,300,700'    rel='stylesheet' type='text/css'>
</head>

<body>

<div>
<section id="navbar">
    <ul>

        <a href ="the_loop.html"><li>The Loop</li></a>
        <a href ="working_with_mito.html"><li>Working With Mito</li></a>
        <a href ="promotional_solutions.html"><li>Promotional Solutions</li></a>
        <a href ="branding_elements.html"><li>Branding Elements</li></a>
    </ul>
</section>
 </div>

<div id="box_one"></div>
<div id="box_two"></div>
<div id="box_three"></div>
<div id="box_four"></div>
<div id="box_five"></div>
<div id="box_six"></div>
<div id="box_seven">
<P>Branding Elements</P>
<div id="box_eight"></div>
<div id="box_nine"></div>
<div id="box_ten"></div>
<div id="box_eleven"></div>
<div id="box_twelve"></div>
<div id="box_thirteen"></div>
<div id="box_fourteen"></div>
<div id="box_fifteen"></div>
<div></div>

<footer></footer>

</body>

 </html>

/****************************
NAVBAR
****************************/


#navbar {
background-color: black;
height:40px;
width:1454px;
margin-left: -30px;
margin-top: -16px;
border-bottom: 1px solid #ff0000;


}

#navbar ul {
text-decoration: none;
list-style: none;
}

#navbar ul li {
display:inline-block;
float:right;
color:white;
padding-right: 190px;
padding-top: 10px;
font-family: 'Comfortaa', cursive;
font-weight: 10;


}


#navbar ul a li:hover {
color:#000;
text-shadow: 0.1em 0.1em #fff;
font-size: 1.1em;
margin-top:-1px;

}


/****************************
HOME PAGE LAYOUT
****************************/

#box_one {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -8px;
max-width: 100%

}

#box_two {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%

}

#box_three {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width: 100%
}

#box_four {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width: 100%

}

#box_five {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width: 100%
}

#box_six {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -8px;
max-width: 100%;
}

#box_seven {
height:285px;
width:285px;
border: 1px solid black;
background-color: #6666cc;
display:inline-block;
margin-left: -5px;
max-width: 100%

}

.elementbox {

}


#box_eight {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%

}


#box_nine {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%

}

#box_ten {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}

#box_eleven {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -8px;
}

#box_twelve {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -5px;
}

#box_thirteen {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -5px;
}


#box_fourteen {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -5px;
}

#box_fifteen {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}

<div>
 Header
</div>

<div class="section group">
    <div class="col span_1_of_2">
    This is column 1
    </div>
    <div class="col span_1_of_2">
    This is column 2
    </div>
</div>
<div class="section group">
    <div class="col span_1_of_2">
    This is column 1
    </div>
    <div class="col span_1_of_2">
    This is column 2
    </div>
</div>
<div class="section group">
    <div class="col span_1_of_2">
    This is column 1
    </div>
    <div class="col span_1_of_2">
    This is column 2
    </div>
</div>

<div>
 footer
</div>

.span_2_of_2 {
    width: 100%;
}

.span_1_of_2 {
    width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_2_of_2 {
        width: 100%;
    }
    .span_1_of_2 {
        width: 100%;
    }
}
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}