title: CSS & HTML Spacing Issue
body: <p>Hi guys I am trying to add to my page a menu bar down the left hand side</p>
  
  <p>my issue is its pushing all the html below this out of line.  The menu bar is showing but its not able to be clicked on.</p>
  
  <p>How can I sort this issue please..</p>
  
  <p>Many thanks in advance</p>
  
  <p>here is some code I added to the HTML and the Stylesheet.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta https-equiv="Content-Type" content="text/html;charset=utf-8"&gt;
  &lt;title&gt;Site tile &lt;/title&gt;
  &lt;div id="wrapper"&gt;
  &lt;!-- Add icon library --&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;div class="icon-bar"&gt;
    &lt;a class="active" href="https://Sitehere.com"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/a&gt; 
    &lt;a href="https://Sitehere.com "&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/a&gt; 
    &lt;a href=mailto:email@here.com&gt;&lt;i class="fa fa-envelope"&gt;&lt;/i&gt;&lt;/a&gt; 
    &lt;a href="https://sitehere.com/signup"&gt;&lt;i class="fa fa-globe"&gt;&lt;/i&gt;&lt;/a&gt; 
  &lt;/div&gt;
  &lt;!--CSS--&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;link rel="stylesheet" href="css/bootstrap-light.css"&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'&gt;
  &lt;!--/CSS--&gt;
  
  &lt;!--JS--&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.plugin.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.countdown.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  </code></pre>
  
  <p>This is what I added to the style sheet..</p>
  
  <pre><code>}
  
  .icon-bar {
      width: 90px; /* Set a specific width */
      background-color: #555; /* Dark-grey background */
  }
  
  .icon-bar a {
      display: block; /* Make the links appear below each other instead of side-by-side */
      text-align: center; /* Center-align text */
      padding: 16px; /* Add some padding */
      transition: all 0.3s ease; /* Add transition for hover effects */
      color: white; /* White text color */
      font-size: 36px; /* Increased font-size */
  }
  
  .icon-bar a:hover {
      background-color: #000; /* Add a hover color */
  }
  
  .active {
      background-color: #4CAF50; /* Add an active/current color */
  }
  </code></pre>
  
  <p>How do i stop this pushing all the HTML text below down the page? and is there any reason the bar can be seen but not interacted with?</p>
  
  <p>many thanks in advance!</p>
  
  <p>FULL HTML</p>
  
  <hr>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta https-equiv="Content-Type" content="text/html;charset=utf-8"&gt;
  &lt;title&gt;Coming Soon &lt;/title&gt;
  &lt;div id="wrapper"&gt;
  &lt;!-- Add icon library --&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;div class="icon-bar"&gt;
    &lt;a class="active" href="https://EXAMPLE.COM"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/a&gt; 
    &lt;a href="https://EXAMPLE.COM/support "&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/a&gt; 
    &lt;a href=mailto:admin@SITE.COM&gt;&lt;i class="fa fa-envelope"&gt;&lt;/i&gt;&lt;/a&gt; 
    &lt;a href="https://EXAMPLE.COM/signup"&gt;&lt;i class="fa fa-globe"&gt;&lt;/i&gt;&lt;/a&gt; 
  &lt;/div&gt;
  &lt;!--CSS--&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;link rel="stylesheet" href="css/bootstrap-light.css"&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'&gt;
  &lt;!--/CSS--&gt;
  
  &lt;!--JS--&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.plugin.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.countdown.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function () {
      $('#defaultCountdown').countdown({until: new Date(2017, 8-1, 25)}); 
      //Replace above date with your own, to find out more visit https://keith-wood.name/countdown.html
  });
  &lt;/script&gt;
  &lt;!--/JS--&gt;
  
  &lt;/head&gt;
  &lt;script type="text/javascript"&gt; //&lt;![CDATA[ 
  var tlJsHost = ((window.location.protocol == "httpss:") ? "httpss://secure.comodo.com/" : "https://www.trustlogo.com/");
  document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E"));
  //]]&gt;
  &lt;/script&gt;
  &lt;body&gt;
  &lt;!--DARK OVERLAY--&gt;
  &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;!--/DARK OVERLAY--&gt;
  &lt;!--WRAP--&gt;
  &lt;div id="wrap"&gt;
      &lt;!--CONTAINER--&gt;
      &lt;div class="container"&gt;
          &lt;img src="images/LOGO.png" alt="LOGO" class="image-align" /&gt;
          &lt;h1&gt;
              &lt;span&gt;We are&lt;/span&gt;&lt;br/&gt;
              Reaching For &lt;span class="yellow"&gt;The Moon.&lt;/span&gt;
          &lt;/h1&gt;
          &lt;p&gt;SITE TEXT HERE.&lt;/p&gt;
          &lt;div id="defaultCountdown"&gt;&lt;/div&gt;
          &lt;form action="#"&gt;
              &lt;input type="text" name="email" id="email" value="Subscribe to find out when we are done"&gt;
              &lt;input type="submit" value="GO!"&gt;
          &lt;/div&gt;
          &lt;/form&gt;
          &lt;p class="copyright"&gt;Designed by &lt;a href="https://EXAMPLE.COM" target="_blank"&gt;Investex.pro&lt;/a&gt;&lt;/p&gt;
          &lt;img src="images/comodo_secure_seal_76x26_transp.png" alt="Comodo" class="image-align" /&gt;
      &lt;/div&gt;
      &lt;!--/CONTAINER--&gt;
  
  &lt;!--/WRAP--&gt;
  
  &lt;script language="JavaScript" type="text/javascript"&gt;
  TrustLogo("https://EXAMPLE.COM/images/comodo_secure_seal_76x26_transp.png", "CL1", "none");
  &lt;/script&gt;
  &lt;a  href="httpss://ssl.comodo.com" id="comodoTL"&gt;Comodo SSL&lt;/a&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>