title: Content does not stay in Grid Wrapper; Fixed Sidebar for bigger screens
body: <p>I'm trying to make a simple responsive layout for a webpage,
  and encountered two problems:</p>
  
  <ol>
  <li>I'm trying make the sidebar(containing header,nav and footer) a fixed bar when using a screen bigger than 660px in width.</li>
  <li><p>When stretching the screen to 800px, I noticed the dummy text I put into the main container overflows.</p>
  
  <p>Here's part of the code:</p>
  
  <pre><code>.wrapper{ display:grid; grid-template-columns: 1fr 4fr;}
  </code></pre></li>
  </ol>
  
  <p>full code:</p>
  
  <p><a href="https://codepen.io/Aeshtray/pen/GvPdoQ/" rel="nofollow noreferrer">https://codepen.io/Aeshtray/pen/GvPdoQ/</a></p>
  
  <p>And a screenshot about what I meant by overflowing content:
   <a href="https://i.stack.imgur.com/AXtrz.png" rel="nofollow noreferrer">https://i.stack.imgur.com/AXtrz.png</a></p>