title: HTML/CSS link scroll not scrolling to correct position
body: <p>I'm having trouble figuring out why my links are not scrolling to the correct position. They are scrolling to the section below where they should. I've looked at all the examples I could find to no avail. </p>
  
  <pre><code> &lt;div class="bottomarea"&gt;
   &lt;div class="bottomareatitles"&gt;IDX Website Features&lt;/div&gt;
   &lt;div class="bottomareasubtitle"&gt;WeeboWeb real estate websites have all the tools you need to market yourself and grow your business online. Effective, professional designs that connect you with 32% more buyers and sellers. &lt;/div&gt;
   &lt;div id="iconcontainer"&gt;
      &lt;a href="#effectivedesigns"&gt;&lt;div class="bottomareaicons"&gt;&lt;i class="fa fa-laptop" aria-hidden="true"&gt;&lt;/i&gt;&lt;br&gt;Effective Designs&lt;/div&gt;&lt;/a&gt;
      &lt;a href="#quicksetup"&gt;&lt;div class="bottomareaicons"&gt;&lt;i class="fa fa-hourglass-half" aria-hidden="true"&gt;&lt;/i&gt;&lt;br&gt;Quick Setup&lt;/div&gt;&lt;/a&gt;
      &lt;a href="#leadcapture"&gt;&lt;div class="bottomareaicons"&gt;&lt;i class="fa fa-users" aria-hidden="true"&gt;&lt;/i&gt;&lt;br&gt;Lead Capture&lt;/div&gt;&lt;/a&gt;
      &lt;a href="#mapsearch"&gt;&lt;div class="bottomareaicons"&gt;&lt;i class="fa fa-map-marker" aria-hidden="true"&gt;&lt;/i&gt;&lt;br&gt;Map Search&lt;/div&gt;&lt;/a&gt;
      &lt;a href="#mobilefriendly"&gt;&lt;div class="bottomareaicons"&gt;&lt;i class="fa fa-mobile" aria-hidden="true"&gt;&lt;/i&gt;&lt;br&gt;Mobile Friendly&lt;/div&gt;&lt;/a&gt;
      &lt;a href="#socialmedia"&gt;&lt;div class="bottomareaicons"&gt;&lt;i class="fa fa-facebook" aria-hidden="true"&gt;&lt;/i&gt;&lt;br&gt;Social Media&lt;/div&gt;&lt;/a&gt;
      &lt;a href="#blogging"&gt;&lt;div class="bottomareaicons"&gt;&lt;i class="fa fa-comments" aria-hidden="true"&gt;&lt;/i&gt;&lt;br&gt;Blogging&lt;/div&gt;&lt;/a&gt;
      &lt;a href="#branding"&gt;&lt;div class="bottomareaicons"&gt;&lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;&lt;br&gt;Branding&lt;/div&gt;&lt;/a&gt;
  &lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="bottomsection"&gt;
    &lt;div class="section"&gt;
    &lt;h1&gt;&lt;a id="effectivedesigns"&gt;Effective Designs&lt;/a&gt;&lt;/h1&gt;
    &lt;p&gt;sample content&lt;/p&gt;&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="section"&gt;
    &lt;h1&gt;&lt;a id="quicksetup"&gt;Quick Setup&lt;/a&gt;&lt;/h1&gt;
    &lt;p&gt;sample content&lt;/p&gt;
    &lt;/div&gt;
  
   &lt;div class="section"&gt;
   &lt;h1&gt;&lt;a id="leadcapture"&gt;Lead Capture&lt;/a&gt;&lt;/h1&gt;
   &lt;p&gt;sample content&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="section"&gt;
   &lt;h1&gt;&lt;a id="mapsearch"&gt;Map Search&lt;/a&gt;&lt;/h1&gt;
   &lt;p&gt;sample content&lt;/p&gt;
   &lt;/div&gt;
  
   &lt;div class="section"&gt;
   &lt;h1&gt;&lt;a id="mobilefriendly"&gt;Mobile Friendly&lt;/a&gt;&lt;/h1&gt;
   &lt;p&gt;sample content&lt;/p&gt;
   &lt;/div&gt;
  
   &lt;div class="section"&gt;
   &lt;h1&gt;&lt;a id="socialmedia"&gt;Social Media&lt;/a&gt;&lt;/h1&gt;
   &lt;p&gt;sample content&lt;/p&gt;
   &lt;/div&gt;
  
   &lt;div class="section"&gt;
   &lt;h1&gt;&lt;a id="blogging"&gt;Blogging&lt;/a&gt;&lt;/h1&gt;
   &lt;p&gt;sample content&lt;/p&gt;
   &lt;/div&gt;
  
   &lt;div class="section"&gt;
   &lt;h1&gt;&lt;a id="branding"&gt;Branding&lt;/a&gt;&lt;/h1&gt;
   &lt;p&gt;sample content&lt;/p&gt;
   &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS</p>
  
  <pre><code>.bottomarea {display:block; width:100%;}
  .bottomareatitles {text-align:center; margin-top:50px; font-size:26px; color:#000000; font-weight:350;}
  .bottomareasubtitle {text-align:center; padding-top:20px; color: dimgrey; width:75%; margin:auto;}
  .bottomareaicons {width:130px; display:inline-block; margin:auto; text-align:center; margin-top:40px; color:#000000; font-size:16px; padding-bottom:10px; padding-top:10px;}
  .bottomareaicons:hover {width:130px; display:inline-block; margin:auto; text-align:center; margin-top:40px; color:#000000; font-size:16px; background:#2584b8; padding-bottom:10px; padding-top:10px;}
  .bottomareaicons i {font-size:3.0em; padding-bottom:20px; color:#2584b8;}
  .bottomareaicons:hover &gt; i {font-size:3.0em; padding-bottom:20px; color:#ffffff;}
  .iconcontainer {margin:auto; text-align:center;}
  .bottomsection {margin-top:50px;}
  .bottomsection .section h1 {text-align:center;}
  .bottomsection .section p {text-align:center;}
  </code></pre>
  
  <p>You can see a live example of whats happening here: <a href="https://www.weeboweb.com/idx-websites/" rel="nofollow noreferrer">https://www.weeboweb.com/idx-websites/</a></p>
  
  <p>I'm attempting to just use css to make this work. Any help is greatly appreciated. This has had me a bit baffled. </p>