CSS3 rotate and website width

Question

I have to rotate parts of contents on my website. The problem is the parts to be rotated are 100% of the width of the website, and after they are rotated, they are more than 100% width, so I have an ugly horizontal scrollbar.

I tried to add an overflow: hidden to the body, but the website is not scrollable vertically so its not a solution.

Here's a Fiddle : http://jsfiddle.net/0kg3g2wo/

HTML :

<div class="first"><h2>Txt txt </h2></div>

<div class="wrapper">
  <div class="bgtext ">
      <h3>Texte TexteTexteTexteTexte Texte Texte Texte Texte Texte Texte </h3>
  </div>
  <div class="bottomrotated"></div>
</div>

CSS :

*{
    margin: 0;
    padding: 0;
  }
.first{
      transform: rotate(-8deg);
      position: absolute;
      width: 100%;
      height: 30px;
      top: 20%;
      background: #000;
      padding: 0 30px;
      left: -15px;
  }

  h2, h3{
    color: #FFF;
    text-align: center;
    font: arial;
  }

  .wrapper{
    position:relative;
  }
  .bgtext{
      background: lightgrey;
      padding: 0 0 0px 0;
      position: relative;
      z-index: 2;
  }

  .bottomrotated{
      height: 60px;
      width: 100%;
      transform: rotate(2deg);
      background: lightgrey;
      position: absolute;
      bottom: -30px;
      z-index: 1;
  }

Answer 1

Try it, update

  body{overflow-x:hidden}

Answer 2

you could add :

body{
    overflow-x:hidden;
}

to disable horizontal scrollbar but allow vertical scrolling.

DEMO