I am facing an issue. I checked a lot of other StackOverflow threads, but none worked for my scenario.
So, basically, I have two `div`s, one transformed on top of another by a specified value.
But, there is a lot of white space between the transformed `div` and the `h1` text which I want to remove.

Here is my code:

```css
.div1,
.div2 {
  height: 200px;
}

.div1 {
  background-color: aqua;
  width: 200px
}

.div2 {
  width: 190px;
  transform: translateY(-20%);
  background-color: purple;
  z-index: 10;
}
```

```html
<div class="div1"></div>
<div class="div2"></div>
<h1>Hello</h1>
```

I have attached an image of the whitespace for better understanding:
<https://i.stack.imgur.com/50uAi.png>

Any solutions would be highly appreciated!