Align magnifying glass image within the field (input) of search - html

Question

I’d like to align the image so it’s right inside the search field, like this:

But it’s getting like this:

Code I’m using:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
    
.btn-text-top {
  background-color: #f5f6fa;
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 15px 50px 15px 30px;
  border-radius: 20px;
  width: 100%!important;
  height: 42px;
  font-weight: 300;
  color: #8795a2;
}
    
.btn-buscar-top {
  width: 20px!important;
  height: 22px;
  background: url(http://www.devmedia.com.br/imagens/2013/buscar_grey.png) no-repeat;
  cursor: pointer!important;
  border: none;
  transform: translateY(-50%);
  padding: 0;  
}

<div class="container">
  <form class="form-busca-site" action="busca.php">
    <input class="btn-text-top" type="text" name="txtsearch" placeholder="Buscar">
    <div><button class="btn-buscar-top" type="submit"></button></div>
  </form>
</div>

Answer 1

One of the many ways to solve could be using position: relative, which would relate to input, and go using the positions top and left, as in the code:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
    
.btn-text-top {
  background-color: #f5f6fa;
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 15px 50px 15px 30px;
  border-radius: 20px;
  width: 100%!important;
  height: 42px;
  font-weight: 300;
  color: #8795a2;
}
    
.btn-buscar-top {
  width: 20px!important;
  height: 22px;
  background: url(http://www.devmedia.com.br/imagens/2013/buscar_grey.png) no-repeat;
  cursor: pointer!important;
  border: none;
  transform: translateY(-50%);
  padding: 0;
  position: relative;
  top: -35px;
  left: 280px;
}

<div class="container">
  <form class="form-busca-site" action="busca.php">
    <input class="btn-text-top" type="text" name="txtsearch" placeholder="Buscar">
    <div><button class="btn-buscar-top" type="submit"></button></div>
  </form>
</div>