title: Spacing Between Divs (Vertical) and Sizing of Sub-Divs to Hold Content on Page
body: <p>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 <em>think</em> I have cleaned up my syntax and the development of my CSS as well as HTML are coming along quite nicely now.</p>
  
  <p>Now, on to the issues at hand. There are two that I'm working through now:</p>
  
  <ol>
  <li><p>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 <strong>really</strong> like to do this without 'hacking' it with negative margins.</p>
  
  <p><img src="https://i.stack.imgur.com/50xuX.png" alt="This is the &#39;nav with spacing&#39; - which shows the actual black line between the divs"></p>
  
  <p><img src="https://i.stack.imgur.com/RC9tU.png" alt="This is the way it SHOULD look - and does look, on certain screen resolutions"></p>
  
  <p><strong>BONUS:</strong> 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 <code>.bodySection2</code> and the <code>.section</code> divs that are the orange boxes.</p>
  
  <p><img src="https://i.stack.imgur.com/wCP1p.png" alt="As you can see here, there is a black (which is background color of that cell) padding around the image itself. I&#39;d like to remove this."></p></li>
  <li><p>This one is kind of annoying. I have a class, <code>.section</code>, 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 <code>.bodySection2</code> 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?</p>
  
  <p><img src="https://i.stack.imgur.com/feU3P.png" alt="Mis-matched .section boxes in my bodySection2 div"></p></li>
  </ol>
  
  <p>Fiddle HEre: <a href="http://jsfiddle.net/pnqo8jmy/" rel="nofollow noreferrer" title="Fiddle">Fiddle Here</a></p>
  
  <p>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.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="keywords" content=""&gt;
      &lt;title&gt;Frick Solutions - Technology Consulting for Small Business&lt;/title&gt;
      &lt;meta name="keywords" content="HTML,CSS"/&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"/&gt;
      &lt;link rel="stylesheet" type="text/css" href="/redesign/css/fricksolutions.css"/&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
    &lt;div class ="container"&gt;
  
   &lt;div class="navLogo"&gt;
  
    &lt;a href="/index.html"&gt;&lt;img src="/redesign/img/FrickSolutionsLogoWhite.png" style="height:100%; width:AUTO;"&gt; &lt;/a&gt;
  
    &lt;div class="navElements" align="right"&gt;
    &lt;li&gt; &lt;a href="/why.html"&gt;Why Us?&lt;/a&gt;&lt;/li&gt; 
    &lt;li&gt; &lt;a href="/smallbusiness.html"&gt;Small Business&lt;/a&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;a href="/servers.html"&gt; Servers &lt;/a&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;a href="/athome.html"&gt; @Home &lt;/a&gt; &lt;/li&gt; 
    &lt;li&gt; &lt;a href="/contact.html"&gt;Contact&lt;/a&gt; &lt;/li&gt;
    &lt;/div&gt; &lt;!--Close navElememts div --&gt;
  &lt;/div&gt; &lt;!--Close navlogo div --&gt;
  &lt;div class = "bodySection"&gt;
  &lt;div class = "topImage"&gt;
  &lt;img src ="/redesign/img/NoteBookCoffeeforWeb2.png" style="width: 100%; height:auto; display:block;" alt="Let's Get to Work!"&gt;
  &lt;/div&gt; &lt;!--Close TopImage div&gt;\--&gt;
  &lt;/div&gt;&lt;div class = "bodySection2"&gt; &lt;!-- close bodySection --&gt;
  &lt;center&gt;
  &lt;div class = "section" style="height:50%;"&gt;
  &lt;img src="/redesign/img/target.png"&gt;&lt;br&gt;
  &lt;b&gt;A Targeted Approach&lt;/b&gt;&lt;br&gt;
  Frick Solutions takes a targeted approach to solving your business problems through creative use of technologies.
  &lt;/div&gt;&lt;!-- Close leftSection --&gt;
  &lt;div class = "section" style="height:50%;"&gt;
  &lt;img src="/redesign/img/arrow.png"&gt;&lt;br&gt;
  &lt;b&gt;Guidance&lt;/b&gt;&lt;br&gt;
  Providing guidance to small businesses on hot to get the best return on their technology investment and plan for the future.
  &lt;/div&gt; &lt;!-- Close midSection --&gt;
  &lt;div class = "section" style="height:50%;"&gt;
  &lt;img src="/redesign/img/speechbub.png"&gt;&lt;br&gt;
  &lt;b&gt;Training&lt;/b&gt;&lt;br&gt;
  Training for all of your staff on various technologies.&lt;/div&gt;
  &lt;/center&gt;
  
  &lt;!-- Close rightSection --&gt;
  &lt;!-- &lt;div class = "section"&gt;
  left text test
  &lt;/div&gt;&lt;!-- Close leftSection --&gt;
  &lt;!--&lt;div class = "section"&gt;
  mid text test
  &lt;/div&gt; &lt;!-- Close midSection --&gt;
  &lt;!--&lt;div class = "section"&gt;
  right text test
  &lt;/div&gt;&lt;!-- Close rightSection --&gt;
  &lt;/center&gt;
  &lt;/div&gt; &lt;!--close bodySection2 --&gt;
  &lt;/div&gt; &lt;!-- close container --&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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 */
  </code></pre>