Firstly, I wanted to thank all of the great folks here who helped me solve a ton of issues with my basic layout, syntax, and the like. I *think* I have cleaned up my syntax and the development of my CSS as well as HTML are coming along quite nicely now.

Now, on to the issues at hand. There are two that I'm working through now:

1. There is spacing between the top navigation area, and the image in the next div. This only shows up at certain zoom levels, but I need to make sure it doesn't ever show up. I have tried eliminating the white space, and have made sure that all borders/padding are gone from this classes. The one thing I haven't tried is negative margins on the bottom of the Nav divs, but I would **really** like to do this without 'hacking' it with negative margins.

![This is the 'nav with spacing' - which shows the actual black line between the divs](https://i.stack.imgur.com/50xuX.png)

![This is the way it SHOULD look - and does look, on certain screen resolutions](https://i.stack.imgur.com/RC9tU.png)

**BONUS:** Why can I not get the topImage class (which holds the .png file under the nav) to be an actual 100% width? I have tweaked it a bunch, but I keep ending up with padding on the sides. It's not the end of the world, but I would like it to be 100% just so it flows with the top elements, and also looks a little cleaner when it connects up to `.bodySection2` and the `.section` divs that are the orange boxes.

![As you can see here, there is a black (which is background color of that cell) padding around the image itself. I'd like to remove this.](https://i.stack.imgur.com/wCP1p.png)
2. This one is kind of annoying. I have a class, `.section`, which is the orange blocks on the page. These are all the same, programatically and I did a bunch of fiddling with the width and spacing to get them perfectly centered within the `.bodySection2` div, so that I'm happy with. However, as you can see in the screenshot below, each of the boxes is a different size, even though they've been given the same Height % from the CSS. I realize that if I filled it out with text, they would adjust to be the same size, but I want to make sure they are the same size, regardless of the content inside of them. I have tried the Height: XX% (as well as making sure all parents have a % height set), but it does not seem to have any effect at all. Can you guys guide me on this one?

![Mis-matched .section boxes in my bodySection2 div](https://i.stack.imgur.com/feU3P.png)

Fiddle HEre: [Fiddle Here](http://jsfiddle.net/pnqo8jmy/ "Fiddle")

Also - Any suggestions, advice, thoughts, comments, etc etc on the layout, color scheme, navigation elements, or whatever, would be greatly appreciated! I am in the midst of re-branding my company, and obviously, the web site is one of the biggest things to promote my brand.

HTML :

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Frick Solutions - Technology Consulting for Small Business</title>
    <meta name="keywords" content="HTML,CSS"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="/redesign/css/fricksolutions.css"/>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto">
  </head>
  <body>

  <div class ="container">

 <div class="navLogo">

  <a href="/index.html"><img src="/redesign/img/FrickSolutionsLogoWhite.png" style="height:100%; width:AUTO;"> </a>

  <div class="navElements" align="right">
  <li> <a href="/why.html">Why Us?</a></li> 
  <li> <a href="/smallbusiness.html">Small Business</a></li> 
  <li><a href="/servers.html"> Servers </a></li> 
  <li><a href="/athome.html"> @Home </a> </li> 
  <li> <a href="/contact.html">Contact</a> </li>
  </div> <!--Close navElememts div -->
</div> <!--Close navlogo div -->
<div class = "bodySection">
<div class = "topImage">
<img src ="/redesign/img/NoteBookCoffeeforWeb2.png" style="width: 100%; height:auto; display:block;" alt="Let's Get to Work!">
</div> <!--Close TopImage div>\-->
</div><div class = "bodySection2"> <!-- close bodySection -->
<center>
<div class = "section" style="height:50%;">
<img src="/redesign/img/target.png"><br>
<b>A Targeted Approach</b><br>
Frick Solutions takes a targeted approach to solving your business problems through creative use of technologies.
</div><!-- Close leftSection -->
<div class = "section" style="height:50%;">
<img src="/redesign/img/arrow.png"><br>
<b>Guidance</b><br>
Providing guidance to small businesses on hot to get the best return on their technology investment and plan for the future.
</div> <!-- Close midSection -->
<div class = "section" style="height:50%;">
<img src="/redesign/img/speechbub.png"><br>
<b>Training</b><br>
Training for all of your staff on various technologies.</div>
</center>

<!-- Close rightSection -->
<!-- <div class = "section">
left text test
</div><!-- Close leftSection -->
<!--<div class = "section">
mid text test
</div> <!-- Close midSection -->
<!--<div class = "section">
right text test
</div><!-- Close rightSection -->
</center>
</div> <!--close bodySection2 -->
</div> <!-- close container -->

  </body>
</html>

```

CSS:

```
body {

  color: black;
  font-family: "Roboto", sans-serif;
  background-color: white;
  margin: 0;  /*use this to ensure left most content goes all the way to border of page */
  width: 100%;
  height: 100%;
 }

 html {
 height: 100%; }

@media screen and (min-width:30em) { /* used to be 600 px */
  .navLogo
  {
  padding-left: 1%;
  padding-right: 1%;
  position: fixed;
  background-color: #373737;
  width: 98%;
  height: 10%;
 /* border: 1px solid green;  */
   }

   .navElements
   {
   padding-right: 1%;
   padding-left: 1%;
   font-family: "Roboto", sans-serif;
   background-color: transparent;
   position: absolute;
   bottom: 0px;
   width: 95%;
   padding-bottom: .25%;
 /*  border: 1px solid orange; */
    }

    .navElements li
    {
    color: white;
    background-color:transparent;
    display: inline-block;
    padding: 5px 10px 0 0;
     }
     a:link 
    {
  color: white 

  }
a:visited 
  {
  color: white 
  }
  a:hover
  {
      color: grey;      
  }

 .bodySection /* This is used to contain the image directly under the navigation/logo*/
 {
 padding-left: 1%; 
 padding-right: 1%;
 padding-top: 5%;  /*this is here as a hack to make sure the bodySection div shows up under the navLogo/navElement divs*/
 width: 98%;
 height: 100%;
 overflow: auto; /*forces all content inside the div to appear within the div */
 background-color: black;
 display: block;
/* border: 1px solid red; */

  }

   .bodySection2 /*This holds the content under the images (boxes with images and text) */
 {
 padding-left: 1%; 
 padding-right: 1%;
 padding-top: 1%; 
 width: 98%;
 height: 100%;
 overflow: auto; /*forces all content inside the div to appear within the div */
 background-color: white;
 display: block;
/* border: 1px solid red; */

  }

  .topImage
 {
 clear:left;
 width: 100%;
 display: block; 
 background-color: black;
 overflow: auto;
  /*border: 1px solid pink; */
  }

 .section
 { 
 width: 22%;
 height: 90%;
 border: 4px solid;
 border-color: #FFB238;
 margin-left: 5%;
 margin-right: 2%;
 float:left; 
 padding-left: 1%;
 padding-right: 1%;
 margin-top: 1%;
 padding-top: 1%;
 padding-bottom: 1%;
 margin-bottom: 1%;
 /*overflow: auto; */
  }

.container
{
  width: 100%;
  /*overflow: auto; */
  background-color: black;
  /*border: 1px solid blue;  */
  }

 } /*closes @ mediaedia screen and (min-width:30em */

```