title: Can someone, please, tell me how to get the top slanted div to cover the whole top of the screen?
body: <p>I would like to get the top slanted div to cover the whole top of the screen, including the white space on the top left. Can someone, please, tell me a way that I can do that?</p>
  
  <p>Check this link to see how I want it to be:
  <a href="https://imgur.com/a/JDaVuWf" rel="nofollow noreferrer">https://imgur.com/a/JDaVuWf</a></p>
  
  <p>Thank You!       </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    color: #fff;
  }
  
  .skew {
    transform: skew(0deg, -10deg);
    background-color: gray;
    padding: 200px 0;
    margin-top: -100px;
    margin-bottom: 200px;
    width: 100%;
  }
  
  .content {
    text-align: center;
    transform: skew(0deg, 10deg);
  }
  
  .skew2 {
    transform: skew(0deg, -10deg);
    background-color: blue;
    padding: 200px 0;
    margin-top: -100px;
    margin-bottom: 200px;
  }
  
  .content2 {
    color: black;
    text-align: center;
    transform: skew(0deg, 10deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="sec1"&gt;
    &lt;div class="skew"&gt;
      &lt;div class="content"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section id="sec2"&gt;
    &lt;div class="skew2"&gt;
      &lt;div class="content2"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>