hiding background color overflow HTML/CSS

I'm trying to put a background color shape, like a big div rotate on the background of my website but the problem is when I place this background where I want it to be its creating me a big margin right & bottom ( because of the end of that div that I have created for putting my background )

here is what I have done :

.fill-2{
    position: absolute;
    top: 45%;
    width: 100%;
    z-index: -2;
    background-color: #A08823;
    opacity: 30%;
    height: 200vh;
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);  
}

<body>
    <div class="fill-1"></div>
    <div class="container">
        <!-- my content -->
    </div>
    <div class="fill-2"></div>
</body>

Solution

The question is a bit unclear, but here are some hints: The absolutely positioned (background) element should be a child element of your main element. Then you can apply position: relative;, overflow: hidden; and optionally a fixed height to the main element (.container in my example below), which will hide those parts of the background that go beyond the main element:

.fill-2 {
  position: absolute;
  top: 45%;
  width: 100%;
  z-index: -2;
  background-color: #A08823;
  opacity: 30%;
  height: 200vh;
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

.container {
  height: 300px;
  position: relative;
  overflow: hidden;
}

<body>
  <div class="fill-1"></div>
  <div class="container">
    <!-- my content -->
    <div class="fill-2"></div>
  </div>
</body>