title: Transform: Rotate background-color
body: <p>I'm having problems with transform: rotate on one of my headers. I'm trying to make the entire top half of the page have slight slant, this includes the text and the background. When I rotate the div it creates white space instead of filling the rest of the content in with the background color. The effect I'm trying to achieve is having the area outlined in blue to be the same red color so it expands from the left side of the page to the right. Here is the screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/tjbs7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tjbs7.png" alt="enter image description here"></a></p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;div class="container-fluid header"&gt;
    &lt;div class="row bottom-align"&gt;
      &lt;div class="col-lg-8"&gt;
        &lt;h1&gt;Title&lt;/h1&gt;
        &lt;h1&gt;Second-Title&lt;/h1&gt;
        &lt;h1&gt;Another Title&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-4 text-right bottom-align-text"&gt;
        &lt;ul class="list-inline"&gt;
          &lt;li&gt;&lt;i class="fa fa-facebook fa-outline"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li&gt;&lt;i class="fa fa-twitter fa-outline"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li&gt;&lt;i class="fa fa-instagram fa-outline"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li&gt;&lt;i class="fa fa-pinterest fa-outline"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li&gt;&lt;i class="fa fa-envelope fa-outline"&gt;&lt;/i&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  .header {
  
    background-color: $red-primary;
    color: $white;
    -ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Safari */
    transform: rotate(-5deg);
  
  }
  </code></pre>
  
  <p>Any suggestions would be appreciated.</p>