title: how do I turn the 2 grids around on their side?
body: <p>Need the Portfolio and Services buttons turned around to lie horizontally and in line with the About Us and Contacts buttons.</p>
  
  <p>I can provide the CSS if needed. </p>
  
  <p><strong>Preview of what the website looks now:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/5AzCD.jpg" alt="Preview"></p>
  
  <h2> very confusing</h2>
  
  <pre><code> &lt;!DOCTYPE html&gt;
   &lt;html lang="en"&gt;
   &lt;head&gt;
   &lt;title&gt;Home&lt;/title&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;link rel="icon" href="images/favicon.ico"&gt;
   &lt;link rel="shortcut icon" href="images/favicon.ico" /&gt;
   &lt;link rel="stylesheet" href="css/style.css"&gt;
   &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery-migrate-1.1.1.js"&gt;&lt;/script&gt;
   &lt;script src="js/superfish.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery.equalheights.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery.easing.1.3.js"&gt;&lt;/script&gt;
   &lt;script&gt;
  
  
   &lt;/script&gt;
   &lt;!--[if lt IE 8]&gt;
     &lt;div style=' clear: both; text-align:center; position: relative;'&gt;
       &lt;a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?           strong textocid=ie6_countdown_bannercode"&gt;
         &lt;img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /&gt;
       &lt;/a&gt;
    &lt;/div&gt;
  &lt;![endif]--&gt;
  &lt;!--[if lt IE 9]&gt;
    &lt;script src="js/html5shiv.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" media="screen" href="css/ie.css"&gt;
  
  &lt;![endif]--&gt;
   &lt;/head&gt;
   &lt;body  class="page1"&gt;
  &lt;!--==============================header=================================--&gt;
   &lt;header&gt; 
   &lt;div class="container_12"&gt;
   &lt;div class="grid_12"&gt;
  
  &lt;/div&gt;
  &lt;div class="grid_4"&gt;
    &lt;div class="port"&gt;&lt;div&gt;
      &lt;a class="link_img" href="index-2.html"&gt;&lt;img src="images/page1_img1.jpg" alt=""&gt;      
  
  &lt;span&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="index-1.html" class="maxheight link1"&gt;About Us&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;
  &lt;div class="grid_4"&gt;&lt;h1&gt;&lt;a href="index.html"&gt;&lt;img src="images/logo.png" alt="Brand
      Identity"&gt;&lt;/a&gt;&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="grid_4 fright"&gt;
    &lt;div class="port"&gt;
      &lt;a class="link_img " href="index-2.html"&gt; &lt;img src="images/page1_img2.jpg" alt=""&gt;
                          &lt;span&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="index-6.html" class="maxheight link1"&gt;Contacts&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;div class="port1"&gt;
    &lt;div class="grid_12"&gt;
    &lt;div class="port"&gt;
      &lt;a class="link_img " href="index-2.html"&gt;&lt;img src="images/page1_img3.jpg" alt=""&gt;
    &lt;span&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="index-2.html" class="link1 "&gt;Portfolio&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="port"&gt;
      &lt;a class="link_img " href="index-2.html"&gt;&lt;img src="images/page1_img4.jpg" alt=""&gt;
      &lt;span&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="index-4.html" class="link1 "&gt;Services&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="port2"&gt;
    &lt;div class="grid_12"&gt;
    &lt;div class="port"&gt;
      &lt;a class="link_img " href="index-2.html"&gt;&lt;img src="images/page1_img5.jpg" alt=""&gt; 
      &lt;span&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="index-3.html" class="link1 "&gt;Work for PixelMi&lt;sup&gt;2&lt;/sup&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="port"&gt;
      &lt;a class="link_img " href="index-2.html"&gt;&lt;img src="images/page1_img6.jpg" alt=""&gt;
      &lt;span&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a href="index-5.html" class="link1 "&gt;Blog&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ic"&gt;&lt;/div&gt;
    &lt;/header&gt;
  </code></pre>
  
  
  
  
  
  <pre><code>  &lt;footer&gt;    
   &lt;div class="container_12"&gt;
  &lt;div class="grid_12"&gt;
  &lt;div class="socials"&gt;
    &lt;a href="#"&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;/a&gt;
  &lt;/div&gt;
    &lt;div class="copy"&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
   &lt;/div&gt;
  &lt;/footer&gt;
  
  &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>