title: The icon won't move down...?
body: <p>I'm having a little trouble, the icon won't move down, the whole section moves down when i'm using Margin-top (even on the icon class).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;MT Medical&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="resources/css/style.css"&gt;
      &lt;link rel="stylesheet" href="vendors/css/grid.css"&gt;
      &lt;link rel="stylesheet" href="vendors/css/normalize.css"&gt;
      &lt;link rel="stylesheet" href="vendors/css/ionicons.min.css"&gt;
      &lt;link rel="stylesheet" href="vendors/css/animate.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;div class="row"&gt;
              &lt;div class="top-header"&gt;
                  &lt;img src="https://placehold.it/200x200" alt="logo" class="logo"&gt;
                  &lt;p class="contact-number"&gt;(Edited out)&lt;br&gt;
                  (Edited out)&lt;/p&gt;
                  &lt;i class="ion-ios-telephone"&gt;&lt;/i&gt;
                  &lt;i class="ion-ios-email"&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;nav&gt;
                      &lt;ul class="navigation-menu"&gt;
                          &lt;li&gt;&lt;a class="nav-links" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class="nav-links" href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;  
              &lt;/div&gt;
      &lt;/header&gt;
      &lt;div class="about-us"&gt;
          &lt;div class="symbol-section"&gt;
          &lt;h1&gt;&lt;span class="ion-information-circled main-headers"&gt;&lt;/span&gt;&lt;/h1&gt;
          &lt;/div&gt;
          &lt;p class="main-p"&gt;
              After many years in the Beauty and Medical industry as a salon owner, distributor of product ranges and a creator of my own brands, educator and many years on the road in sales I have come across many types of equipment and interesting people in the Industry.&lt;br&gt;&lt;br&gt;
  I am asked by many of the owners who have come to know me what are the best products and Equipment in the market to purchase at an affordable cost to them. Companies selling overpriced equipment with no back up service and expensive consumables, burn many owners who are only to be left high and dry when something goes wrong. &lt;br&gt;&lt;br&gt;
  Working only with an exclusive portfolio of  Distributors who have built their businesses on honesty and integrity, that deliver on service and supply l can confidently bring my knowledge, skills and reputation together to be a supplier of quality, affordable Devices combined with an Australian owned and made skin care  range to the Medical and Beauty industry.
  
          &lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And then the CSS:</p>
  
  <pre><code>/*---------BASIC SETTINGS-----------*/
  
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  *:focus {
      {outline: none};
  }
  
  html,
  body {
      color: #3b3a3a;
      font-family: 'Yanone', sans-serif;
      font-size: 20px;
      font-weight: 300;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
  }
  
  .clearfix {zoom: 1}
  .clearfix:after {
      content: '.';
      clear: both;
      display: block;
      height: 0;
      visibility: hidden;
  }
  
  h1 {
      font-size: 300%;
      font-weight: 300;
  }
  
  h2 {
      font-size: 225%;
      font-weight: 400;
  }
  
  /*---------REUSABLE CONTENT-----------*/
  
  .row {
      max-width: 100%;
      margin: 0 auto;
  }
  
  section {
      padding: 80px 0;
  }
  
  .box {
      padding: 1%;
  }
  
  /*-----------------------------------*/
  /*              HEADER               */
  /*-----------------------------------*/
  
  .top-header {
      max-width: 100%;
      height: auto;
      background-image: url(/resources/img/asanoha-400px.png);
  }
  
  .logo {
      padding: 10px;
  }
  
  .contact-number {
      float: right;
      padding: 10px;
      color: #464646;
      font-size: 130%;
      margin-right: 10px;
      margin-bottom: 80px;
      display: block;
  }
  
  .ion-ios-telephone {
      float: right;
      position: relative;
      font-size: 150%;
      margin-top: 10px;
  
  }
  
  .ion-ios-telephone:hover,
  .ion-ios-telephone:active {
      opacity: 0.6;
      transition: 0.2s;
  }
  
  .ion-ios-email {
      float: right;
      position: relative;
      font-size: 150%;
      margin-top: 40px;
      margin-right: -22px;
  }
  
  .ion-ios-email:hover,
  .ion-ios-email:active {
      opacity: 0.6;
      transition: 0.2s;
  }
  
  .main-headers {
      text-align: center;
  
  }
  
  .symbol-section {
      text-align: center;
      margin-top: -100px;
  }
  
  .main-p {
      width: 750px;
      margin: 0 auto;
      text-align: center;
      color: #464646;
  }
  
  
  /*-----------------------------------*/
  /*              NAVIGATION           */
  /*-----------------------------------*/
  
  nav {
      width: 100%;
      height: 60px;
      background-color: #343434;
  
  }
  
  .navigation-menu {
      text-align: center;
  }
  .navigation-menu li {
      display: inline-block;
      padding: 10px;
      font-size: 110%;
      padding-top: 15px;
  }
  
  
  .navigation-menu li a:hover,
  .navigation-menu li a:active {
      text-decoration: none;
      opacity: 0.6;
  }
  
  .navigation-menu li a:link,
  .navigation-menu li a:visited {
      text-decoration: none;
      color: #dbdbdb;
      text-transform: uppercase;
      margin: 0 auto;
  }
  
  /*-------------ABOUT US -------*/
  
  .about-us {
      background-image: url(/resources/img/brickwall.png);
      height: 1000px;
      width: 100%;
      margin-top: 100px;
  }
  </code></pre>
  
  <p>And then the photo, if that's any help...
  <a href="https://i.stack.imgur.com/nHAQM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nHAQM.jpg" alt="enter image description here"></a></p>
  
  <p>As you can see, it's targeting the actual element, but when I try to move the icon down, further from the Navigation bar, the whole section moves down?</p>