Stuck on complex navigation bar

HTML & CSS
1

I’ve put together a theme in Photoshop (it’s very rough right now) and I’m trying to build it out in CSS/HTML right now and am having problems with the nav bar (the one with all of the icons). I can get the container for it and the logo however the smaller squares I just can’t get to line up correctly.

<!DOCTYPE html>
<html>
<head>
    <title>JKOgden.net</title>
    <meta name="author" content="James K. Ogden" />
    <meta name="rating" content="general" />
    <meta name="copyright" content="Copyright (c) 2014 James K. Ogden" />
    <link type="application/atom+xml" rel="alternate" href="http://www.jkogden.net/feed/atom/" title="JKOgden's Blog Atom Feed" />
    <link type="image/x-icon" rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" media="all" href="includes/style-v5-0-0.css" title="jkogdendotnet" />
</head>
<body>
<div id="wrapper">
    <div id="container-nav">
        <!--<div style="cursor: pointer;" onclick="window.location='http://www.jkogden.net';">-->
            <div id="container-logo"></div>
        <!--</div>-->
        
        <div id="container-box-blog">
        Blog
        </div>
        
        <div id="container-box-about">
        
        </div>
        
        <div id="container-box-christianity">
        
        </div>
        
        <div id="container-box-photos">
        
        </div>
        
        <div id="container-box-search">
        
        </div>
    </div><!--/container-nav-->
</div><!--/wrapper-->
</body>
</html> 



/*---[ page defaults ]------------------------- */
body {
background:#e4f0f6 url(../media/theme/bg-metro.png);
font-family:"Segoe UI",segoe-cust-standard,"Segoe","Segoe WP","Tahoma","Verdana","Arial";
font-size:11pt;
line-height:1.5em;
margin:auto;
padding:0;
}
@font-face {
font-family:segoe-cust-light;
src:url(fonts/segoeuil.ttf);
}
@font-face {
font-family:segoe-cust-standard;
src:url(fonts/segoeuis.ttf);
}
.small,small {
font:0.8em Arial, Helvetica, Sans-Serif;
}
img {
border:0;
}
acronym {
border-bottom:dotted 1px #2e6bac;
cursor:help;
}
.right {
text-align:right;
}
.center {
text-align:center;
}
.strike {
text-decoration:line-through;
}
.underline {
border-bottom: 1px solid #000;
}
.last-update {
color:gray;
font-size:9pt;
font-style:italic;
}
::-moz-selection{
background:#ddd;
color:#000
}
::selection{
background:#ddd;
color:#000
}
/* ---[ page structure ]---------------------- */
#wrapper {
margin:auto;
padding-top:15px;
width:960px;
min-height:800px;
}
#container-nav {
background:#fff;
height:125px;
width:100%;
}
    #container-logo {
    background:#647687 url(../media/theme/logo.png) no-repeat center;
    height:125px;
    width:300px;
    }
    #container-box-blog {
    margin-left:10px;
    margin-top:10px;
    position:relative;
    background:#647687;
    height:125px;
    width:125px;
    }
/* ---[ text styling ]---------------------- */
2

This is not an answer but a question as to why you’re using <div> elements instead of a <nav> element with nested <a> elements inside of it?

I ask because your current code is not very semantic and will be extremely hard to make accessible via simple tab strokes on a users keyboard.

3

What problems are you having? The code you posted doesn’t demonstrate how you were trying to code that navigation bar.