Элемент заходит на ползунок

body, 
.cf { 
  *zoom: 1; 
} 
 
body:before, 
.cf:before, 
body:after, 
.cf:after { 
  content: ''; 
  display: table; 
} 
 
body:after, 
.cf:after { 
  clear: both; 
} 
 
*, 
*:before, 
*:after, 
*::before, 
*::after { 
  *behavior: url("js/vendor/boxsizing.htc"); 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
} 
 
html { 
  overflow-y: scroll; 
  overflow-x: hidden; 
} 
 
body { 
  width: 100%; 
} 
 
img, 
video, 
audio, 
embed, 
object, 
input, 
iframe { 
  max-width: 100%; 
} 
 
 
/*			STYLE			*/ 
 
@import 'reset.css'; 
@import url("http://fonts.googleapis.com/css?family=Unica+One"); 
@import url("http://fonts.googleapis.com/css?family=Vollkorn:400italic,700italic,400,700"); 
html { 
  font-family: 'Vollkorn', sans-serif; 
  color: #444; 
  line-height: 1.5; 
  font-size: 14px; 
  overflow-y: auto; 
} 
 
@media (min-width: 800px) { 
  html { 
    font-size: 16px; 
  } 
} 
 
a { 
  color: #99f; 
} 
 
a:hover { 
  text-decoration: none; 
} 
 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
  margin-top: 3rem; 
  margin-bottom: 0.5rem; 
  line-height: 1.1em; 
  color: #ff6347; 
  font-weight: normal; 
} 
 
h1 { 
  font-family: 'Unica One', sans-serif; 
  text-transform: uppercase; 
  letter-spacing: 2px; 
  color: #aaa; 
} 
 
p { 
  margin-bottom: 1rem; 
} 
 
img { 
  max-width: 100%; 
} 
 
html, 
body { 
  height: 100%; 
} 
 
.wrap { 
  height: 100vh; 
  display: flex; 
  flex-direction: column; 
} 
 
@media (min-width: 800px) { 
  .wrap { 
    flex-direction: row; 
  } 
} 
 
.content, 
.sidebar { 
  overflow-y: scroll; 
  padding: 2em; 
} 
 
.sidebar { 
  background: #ff6347; 
  flex: 1; 
  border-bottom: 1px solid #eee; 
  text-align: center; 
  padding-bottom: 0.5em; 
} 
 
@media (min-width: 800px) { 
  .sidebar { 
    order: 2; 
  } 
} 
 
.sidebar img { 
  width: 100px; 
  display: inline-block; 
  vertical-align: middle; 
  margin-bottom: 1rem; 
} 
 
@media (min-width: 800px) { 
  .sidebar img { 
    display: none; 
  } 
} 
 
.sidebar nav { 
  font-family: 'Unica One', sans-serif; 
  text-transform: uppercase; 
  letter-spacing: 1px; 
  margin-bottom: 2rem; 
} 
 
.sidebar nav>a, 
.sidebar nav>strong { 
  display: block; 
  color: #fff; 
  text-decoration: none; 
  padding: 1em; 
  border: 1px solid #ff4726; 
  border-top: 0; 
} 
 
.sidebar nav>a:first-child, 
.sidebar nav>strong:first-child { 
  border-top: 1px solid #ff4726; 
} 
 
.sidebar nav>a:hover, 
.sidebar nav>strong { 
  background: #ff5537; 
} 
 
.sidebar p { 
  font-size: 1.1em; 
} 
 
.sidebar p a { 
  color: #fff; 
} 
 
.content { 
  flex: 2; 
  position: relative; 
} 
 
@media (min-width: 800px) { 
  .content { 
    order: 1; 
  } 
} 
 
.logo { 
  display: none; 
} 
 
@media (min-width: 800px) { 
  .logo { 
    display: block; 
    width: 130px; 
    margin-bottom: 2rem; 
  } 
} 
 
.meow { 
  position: absolute; 
  width: 32px; 
  top: 2em; 
  right: 2em; 
  opacity: 0.5; 
} 
 
.meow:hover { 
  opacity: 0.75; 
} 
 
pre, 
code { 
  background: #fafafa; 
  border: 1px solid #eee; 
  padding: 10px; 
  font-size: 0.85rem; 
  margin-bottom: 1rem; 
} 
 
code { 
  padding: 3px; 
  margin-bottom: 0; 
} 
 
pre code { 
  border: 0; 
  padding: 0; 
} 
 
ul, 
ol { 
  margin-left: 1.2em; 
} 
 
.permalink { 
  float: left; 
  width: 0; 
  padding-top: 0; 
  padding-right: 0.7em; 
  border: 0.3em solid transparent; 
  margin: -0.3em 0 0 -1.3em; 
  font-family: 'Unica One', sans-serif; 
  color: #ccc; 
  text-decoration: none; 
  font-size: 20px; 
} 
 
.permalink:before { 
  content: '#'; 
} 
 
@media (min-width: 800px) { 
  .sidebar .credit { 
    display: block; 
    width: 120px; 
    margin: auto auto 1.5rem; 
  } 
} 
 
.github-corner:hover .octo-arm { 
  animation: octocat-wave 560ms ease-in-out 
} 
 
@keyframes octocat-wave { 
  0%, 
  100% { 
    transform: rotate(0) 
  } 
  20%, 
  60% { 
    transform: rotate(-25deg) 
  } 
  40%, 
  80% { 
    transform: rotate(10deg) 
  } 
}

<div class="wrap"> 
 
  <aside class="sidebar"> 
    <nav> 
      <a href="#">#LINK</a> 
      <a href="#">#LINK</a> 
      <a href="#">#LINK</a> 
      <a href="#">#LINK</a> 
      <a href="#">#LINK</a> 
      <a href="#">#LINK</a> 
      <a href="#">#LINK</a> 
      <a href="#">#LINK</a> 
      <a href="#">#LINK</a> 
      <a href="#">#LINK</a> 
      <a href="#">#LINK</a> 
      <a href="#">#LINK</a> 
      <a href="#">#LINK</a> 
      <a href="#">#LINK</a> 
    </nav> 
 
    <a href="#" class="github-corner" aria-label="View source on Github" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#f44336; color:#ECEFF1; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a> 
 
  </aside> 
 
  <main class="content"> 
    <header class="logo"> 
      <a href="#"><img src="./Iteration — Stylus_files/octocat.svg" alt="Stylus"></a> 
    </header> 
 
    <div class="docs"> 
      <h1>Iteration</h1> 
      <h2 id="mixins"> 
        <a class="permalink" title="Link to this place" href="#"></a>Mixins</h2> 
 
      <p>Below we define <code class="highlighter-rouge">apply()</code>, conditionally utilizing all the <code class="highlighter-rouge">arguments</code> so that comma-delimited <em>and</em> expression <strong>true</strong> lists are supported:</p> 
 
      <p>Paragraph</p> 
 
      <div class="highlighter-rouge"> 
        <pre class="highlight"><code>code</code></pre> 
      </div> 
 
      <p>Paragraph</p> 
 
      <div class="highlighter-rouge"> 
        <pre class="highlight"><code>code</code></pre> 
      </div> 
 
      <p>Paragraph</p> 
 
      <div class="highlighter-rouge"> 
        <pre class="highlight"><code>code</code></pre> 
      </div> 
 
    </div> 
 
 
  </main> 
</div>