I've never felt so silly asking a SO question... but here is goes.

I've created a skew which works a charm, see here

```css
.skewed-bg {
  background: #E7ADBB;
  padding: 200px 0;
  transform: skew(0deg, -7deg);
  margin-top: -200px;
  z-index: 0;
  color: white;
}

.skew-lb {
  padding-bottom: 50px !important;
}

.content {
  transform: skew(0deg, 7deg);
  text-align: center;
}
```

```html
<div class="skewed-bg skew-lb">
  <div class="content">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-12 col-md-10 text-center">
          <h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
        </div>
      </div>
    </div>
  </div>
</div>
```

But when I try to make the skew the opposite way round, everything just turns into mayhem and I have no idea why this is happening - surely it's just reversing the numbers of the skew around? This is my code...

```css
.skewed-bg {
    background: #E7ADBB;
    padding: 200px 0;
    transform: skew(-7deg, 0deg);
    margin-top: -200px;
    z-index: 0;
    color: white;
}

.skew-lb {
    padding-bottom: 50px !important;
}
.content {
    transform: skew(7deg, 0deg);
    text-align: center;
}
```

```html
<div class="skewed-bg skew-lb">
  <div class="content">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-12 col-md-10 text-center">
          <h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
        </div>
      </div>
    </div>
  </div>
</div>
```

Can somebody put me out of my misery here? PS- I apologise in advance for being a plonker.