title: Anchor links ruin positioning
body: <p>I have a navigation that is positioned within my content, and above each headline. Then I use anchor links to navigate up and down on the page. The reason for why I've chosen to do it that way (instead of <em>one</em> static nav) is at this point less important than the fact that I want to figure this out:</p>
  
  <p>When I load my page, the position of the navigation bar is great. When I click a link though, it moves up (<em>The padding/margin on top of the nav is more before than after clicking any of the links. That's the issue basically.</em>). <strong>This is what I want to prevent.</strong> For some reason, when clicking the first and last link in the navigation, the section text underneath is offset slightly different than when clicking the second and third link too, and only with a pixel or so. This is extremely annoying /:</p>
  
  <p>What I've tried: Adding/removing margin on some sections and generally trying to think about what I could do next. Googled.</p>
  
  <p>And before we go any further? Is it a common, eternal issue, or is it possible to even achieve?</p>
  
  <p><a href="http://jsfiddle.net/h3bay4sk/1/" rel="nofollow noreferrer">[FIDDLE]</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="Content" id="content"&gt;&lt;div id="topTop"&gt;&lt;/div&gt;
  &lt;div id="career"&gt;
      &lt;section id="section1" data-anchor="section1" class="anchor section"&gt;
          &lt;div class="index"&gt;
              &lt;a href="#section1" class="indexItem"&gt;&lt;div&gt;Section1&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#section2" class="indexItem"&gt;&lt;div&gt;Section2&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#section3" class="indexItem"&gt;&lt;div&gt;Section3&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#section4" class="indexItem"&gt;&lt;div&gt;Section4&lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
              &lt;h2&gt;Section 1&lt;/h2&gt;
              &lt;p&gt;
                  &lt;strong class="fine"&gt;This section is positioned fine&lt;/strong&gt;, &lt;strong class="notfine"&gt;but only the first time,&lt;/strong&gt; &lt;strong class="reallynotfine"&gt;not when you've gotten here by clicking another anchor link!&lt;/strong&gt; Etiam enim sapien, sodales ut ante vitae, porta sagittis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum faucibus varius molestie. Vestibulum dolor est, hendrerit nec ipsum sit amet, mollis elementum enim. Mauris et leo dui. Duis aliquam, purus vitae finibus ornare, eros mauris varius neque, at facilisis augue risus eget diam. Cras vitae urna faucibus, dictum eros a, consectetur arcu. Integer interdum fermentum nisl et congue. Proin dignissim interdum egestas.
              &lt;/p&gt;
              &lt;p&gt;
                  Sed auctor venenatis diam a vulputate. Nunc condimentum orci ex. Pellentesque dapibus ipsum erat, eget pharetra arcu tristique quis. Donec orci justo, ultricies vel purus a, placerat pretium dui. Suspendisse sed nulla vitae ipsum iaculis elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam eu ullamcorper arcu. Proin dictum imperdiet ex at cursus.
              &lt;/p&gt;
              &lt;p&gt;
                  Praesent sit amet eros nisi. Praesent semper vel dolor vitae tempor. Morbi sed dolor in ipsum hendrerit scelerisque eget vitae leo. Nunc sollicitudin in augue non imperdiet. Donec ultricies mollis velit ac tempor. Donec quis commodo tortor, eget tempor quam. Sed non aliquam dui.
              &lt;/p&gt;
              &lt;p&gt;
                  Suspendisse mauris turpis, sagittis nec justo nec, mattis pulvinar est. Nam placerat semper lectus, sed dignissim est. Curabitur aliquam facilisis porta. Sed rutrum vestibulum ornare. Sed dapibus urna velit, eget cursus ante suscipit eget. Vivamus eget risus vehicula, molestie sapien non, commodo mi. Quisque purus augue, cursus eget tortor eu, eleifend consequat sem. Donec porta mollis augue vel malesuada. Suspendisse feugiat porta faucibus. Curabitur aliquet urna quis magna dignissim fermentum. Sed sit amet augue magna.
              &lt;/p&gt;
              &lt;p&gt;
              &lt;p&gt;
                  Donec faucibus in erat ut pellentesque. Quisque facilisis libero lectus, quis dignissim velit semper vitae. Vivamus pulvinar at magna id pretium. Aliquam in urna ligula. Etiam sollicitudin massa risus, eget malesuada risus ullamcorper sed. Suspendisse accumsan enim vel tincidunt facilisis. Nunc sed venenatis lorem. Cras cursus, lorem a accumsan bibendum, turpis nulla faucibus odio, lacinia iaculis erat risus 
              &lt;/p&gt;
          &lt;/section&gt;
  
      &lt;section id="section2" data-anchor="section2" class="anchor section"&gt;
          &lt;div class="index"&gt;
              &lt;a href="#section1" class="indexItem"&gt;&lt;div&gt;Section1&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#section2" class="indexItem"&gt;&lt;div&gt;Section2&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#section3" class="indexItem"&gt;&lt;div&gt;Section3&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#section4" class="indexItem"&gt;&lt;div&gt;Section4&lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;h2 class="paginatorAnchor"&gt;Section 2&lt;/h2&gt;
          &lt;p&gt;
              &lt;strong class="notfine"&gt;This section is positioned too high. In comparison to the others, after this point though, they are &lt;i&gt;all&lt;/i&gt; perfect&lt;/strong&gt;  Suspendisse et pretium velit. Maecenas hendrerit lorem mauris, vel interdum nunc elementum ac. Duis rhoncus lobortis imperdiet. Ut at euismod purus. Maecenas quis purus a mi imperdiet ultricies. Aenean quis mattis arcu. Nullam quis mi metus. Sed et congue arcu, quis bibendum sem. Morbi ultrices nisi ac euismod pharetra. Sed ac eros non nisi dapibus volutpat. Integer est sapien, volutpat in dapibus quis, scelerisque at nisl. Mauris vel nulla sapien. Vestibulum eu eleifend sem. Integer ex metus, pellentesque a nisi a, gravida convallis est.
          &lt;/p&gt;
          &lt;p&gt;
              Suspendisse potenti. Duis blandit, ipsum quis condimentum interdum, neque nisi faucibus diam, sed tempus nibh arcu eu neque. Nulla facilisis id metus et dictum. Morbi sed finibus massa, ac molestie magna. In purus lorem, euismod vitae tempus ac, commodo nec massa. Vestibulum in pharetra lorem, quis egestas erat. Praesent aliquet nec nisl eget maximus. Sed blandit egestas nisl vel lacinia. Ut lorem erat, tempor a sapien sit amet, rhoncus congue elit. Aliquam ornare tortor in dui auctor, eget tempor magna tincidunt. Donec et nisl eros.
          &lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section id="section3" data-anchor="section3" class="anchor section"&gt;
          &lt;div class="index"&gt;
              &lt;a href="#section1" class="indexItem"&gt;&lt;div&gt;Section1&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#section2" class="indexItem"&gt;&lt;div&gt;Section2&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#section3" class="indexItem"&gt;&lt;div&gt;Section3&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#section4" class="indexItem"&gt;&lt;div&gt;Section4&lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;h2 class="paginatorAnchor"&gt;Section 3&lt;/h2&gt;
          &lt;p&gt;
              &lt;strong class="notfine"&gt;This section is positioned too high. In comparison to the others, after this point though, they are &lt;i&gt;all&lt;/i&gt; perfect&lt;/strong&gt; Integer dictum ac risus vitae semper. Nam a congue erat. Donec facilisis erat at ex volutpat imperdiet. Maecenas metus elit, cursus ultrices nisi sed, tincidunt volutpat nulla. Nam vestibulum massa at turpis blandit posuere. Quisque lacinia mi commodo mauris sagittis dapibus ac eu libero. Integer id tristique magna.
          &lt;/p&gt;
          &lt;p&gt;
              Morbi rutrum odio orci, at lobortis mi rhoncus a. Nam varius tempor urna in tempus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tincidunt eros a sapien pellentesque, in commodo ligula varius. Nullam lobortis erat nisl, eu luctus nisl fermentum sed. Sed eu lacus sed turpis imperdiet maximus quis et arcu. Aenean tincidunt purus sit amet sem fringilla, in fringilla mi malesuada. Aliquam vulputate tortor eu enim eleifend suscipit id eget magna. Donec at quam a eros dapibus rutrum. In ut nisi suscipit, maximus neque accumsan, malesuada libero.
          &lt;/p&gt;
      &lt;/section&gt;
  
      &lt;section id="section4" data-anchor="section4" class="anchor section"&gt;
          &lt;div class="index"&gt;
              &lt;a href="#section1" class="indexItem"&gt;&lt;div&gt;Section1&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#section2" class="indexItem"&gt;&lt;div&gt;Section2&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#section3" class="indexItem"&gt;&lt;div&gt;Section3&lt;/div&gt;&lt;/a&gt;
              &lt;a href="#section4" class="indexItem"&gt;&lt;div&gt;Section4&lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;h2 class="paginatorAnchor"&gt;Section 4&lt;/h2&gt;
          &lt;p&gt;
              &lt;strong class="notfine"&gt;This section is positioned too high. In comparison to the others, after this point though, they are &lt;i&gt;all&lt;/i&gt; perfect&lt;/strong&gt; Suspendisse ut aliquam eros. Praesent consequat dapibus auctor. Donec consequat libero in dui condimentum molestie. Integer dignissim erat diam, at facilisis nulla aliquam ut. Nam ullamcorper eu lorem vel egestas. Morbi dictum at quam eget ultricies. Donec finibus pharetra elit, sed scelerisque nibh suscipit id.
          &lt;/p&gt;
          &lt;p&gt;
              Etiam pulvinar ipsum vitae laoreet aliquet. Praesent quis lacinia dolor. Integer neque libero, facilisis vitae porttitor et, rhoncus a nisl. Quisque aliquet ultrices accumsan. Nam augue massa, ultrices rutrum sodales mollis, condimentum id purus. Mauris non semper ipsum. Praesent a dolor at est tincidunt lobortis sed in lorem. Nunc condimentum efficitur odio, at condimentum dui dictum vel. In in lacus non felis hendrerit laoreet. Donec dapibus cursus venenatis. Aliquam fringilla purus sed neque tristique, ac auctor neque finibus. Mauris diam nunc, lacinia sed nisl sit amet, luctus condimentum libero.
          &lt;/p&gt;
  
      &lt;/section&gt;
  
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.Content {
    position: fixed;
      box-sizing: border-box;
      padding: 5px;
      left: 50%;
      transform: translateX(-50%);
      min-width: calc(100% - 30px);
      min-width: 455px;
      max-width: 455px;
      min-height: calc(100% - 30px);
      max-height: calc(100% - 30px);
      height: calc(100% - 172px);
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 0;
      overflow: auto;
      color: hsla(210, 11%, 60%, 1);
      font-family: 'Helvetica', sans-serif;
      font-size: .8rem;
      text-transform: none;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 30px;
      border-bottom-left-radius: 30px;
      padding: 15px;
      -webkit-box-shadow: inset 0 -1px 2px rgba(0,0,0,.24), inset 0 -2px 3px rgba(0, 0, 0, .48);
      -moz-box-shadow: inset 0 -1px 2px rgba(0,0,0,.24), inset 0 -2px 3px rgba(0, 0, 0, .48);
      box-shadow: inset 0 -1px 2px rgba(0,0,0,.24), inset 0 -2px 3px rgba(0, 0, 0, .48);
      background: #15181a;
      background: -moz-linear-gradient(top, #191c1f 1%, #15181a 94px, #15181a 100%);
      background: -webkit-linear-gradient(top, #191c1f 1%,#15181a 94px,#15181a 100%);
      background: linear-gradient(to bottom, #191c1f 1%,#15181a 94px,#15181a 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191c1f', endColorstr='#15181a',GradientType=0 );
  
      left: 15px;
      transform: translateX(0%);
  }
  
  .index {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      background: transparent;
      margin-block-end: 2em;
  }
  
  .indexItem {
      text-decoration: none;
  }
  
  .index div {
      display: flex;
      border: 1px dashed rgba(255,255,255,.24);
      padding: 5px 10px 5px 10px;
      border-radius: 25px;
      margin: 2px 2px 2px 2px;
      font-size: .7rem;
  }
  /* end of the styling related to the issue */
  /* end of the styling related to the issue */
  /* end of the styling related to the issue */
  
  
  /* start of unnesssassary color styling */
  /* start of unnesssassary color styling */
  /* start of unnesssassary color styling */
  /* start of unnesssassary color styling */
  body {
    background:#191c1f;
  }
  
  * {
      outline: none;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  
  ::selection {
      background: yellow;
      color: #191c1f;
  }
  
  a:link, a:visited, a:hover, a:active {
    color:white;
  }
  
  strong.fine {
    color:white;
    border-bottom: dashed green 1px;
  }
  
  strong.notfine {
    color:white;
    border-bottom: dashed yellow 1px;
  }
  
  strong.reallynotfine {
    color:white;
    border-bottom: dashed red 1px;
  }
  
  
  
      /*region Font settings for Tags and Elements */
      b, strong {
          font-family: 'IBM Plex Sans', sans-serif;
          font-weight: 700;
      }
  
      h1 {
          font-size: 2rem;
      }
  
      h2 {
          font-size: 1.3rem;
      }
  
      h3 {
          font-size: 1.05rem;
          line-height: 0.15em;
          text-transform: uppercase;
          font-family: 'IBM Plex Sans', sans-serif;
          font-weight: 700;
      }
  
      h4 {
          font-size: .7rem;
          line-height: .7em;
          text-transform: uppercase;
          font-family: 'IBM Plex Serif', serif;
          font-weight: 400;
      }
  
      .contentTitle {
          font-family: 'IBM Plex Serif', serif;
          font-weight: 400;
          margin-top: 0;
      }
  
      .titles {
          color: white;
          margin: 30px;
          user-select: none;
          margin-top: 55px;
          margin: 55px 30px 14px 30px;
      }
  
  
      /*region Scrollbar*/
      ::-webkit-scrollbar {
          border-radius: 5px;
          background: transparent url('transparent.png') repeat-y !important; /* IMAGE is IMPORTANT as COLOR does NOT work. Also it needs to be HERE */
          border: 0 solid red;
          width: 14px;
          height: 14px !important;
      }
      ::-webkit-scrollbar-button {
          display: none; /* DON'T display the top/bottom/left/right arrows */
      }
      ::-webkit-scrollbar-thumb {
          height: 6px;
          border: 4px solid rgba(0, 0, 0, 0);
          background-clip: padding-box;
          -webkit-border-radius: 7px;
          background-color: rgba(0, 0, 0, 0.15);
          -webkit-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.05), inset 1px 1px 0 rgba(0, 0, 0, 0.05);
      }
      ::-webkit-scrollbar-thumb:hover /* ..and when hovering it */
      {
          border-radius: 5px;
          background-color: rgba(0,0,0,.3);
      }
      ::-webkit-scrollbar-thumb:active /* ..and when clicking it */
      {
          background-color: rgba(0,0,0,.5);
      }
      ::-webkit-scrollbar-thumb:active /* ..and when it's focused */
      {
          background-color: rgba(0,0,0,.5);
      }
      ::-webkit-scrollbar-corner {
          display:none; /* DON'T display the corner */
      }
      ::-webkit-resizer, ::-webkit-resizer:hover, ::-webkit-resizer:focus, ::-webkit-resizer:active {
          background: transparent url('../res/transparent.png') repeat-y !important; /* IMAGE is IMPORTANT as COLOR does NOT work. Also it needs to be HERE */
      }
      /*endregion*/
  </code></pre>