Z-Index with two columns

I want to get the undraw sketch (which has a 10px margin to the right) under the left div, I've tried multiple options for Z-Index but they won't work. I've tried to add any position but they all doesn't work. Hopefully you can help me out!

html,body{
  margin: 0;
  border-style: none;
  padding: 0;
}

.left{
  width: 50%;
  height: 100vh;
  float:left;
}

.right{
  width: 50%;
  right:0;
  height: 100vh;
  float:right;
  background-color: #EA8E81;
}

.image-corrector{
  display: flex;
  align-items: center;
  float:left;
  height: 100vh;
  margin-left: -10px;
}

.sketch-travel{
  height: 160px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Login WiFi | Corendon Airlines</title>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:400,500,600,700,800" />
    <link rel="stylesheet" href="./assets/css/main.css">
  </head>
  <body>
    <div class="main">
      <div class="left">
      </div>

      <div class="right">
        <div class="image-corrector">
          <img src="./assets/images/undraw_travel_booking_6koc.svg" alt="Sketch" class="sketch-travel">
        </div>
      </div>
    </div>
  </body>
</html>

Solution

I've added a overflow to the image container and that works.