¡Hola a todo el mundo! Llevo rato intentandolo pero no hay manera de conseguirlo, intento centrar un objeto vectorial (svg) en un link (<a>) y no hay manera chicos.. Al agrandar la página o hacerla mas pequeña el svg se sale del <a> en vez de quedarse ahi quitezico..

Código HTML :

<article id="botones-reserva">
      <div>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
               <a href="#"></a>
      </div>
   </article>


Código CSS :

botones-reserva{
   width: 100%;
   height: 70px;
   margin-top: 12px;
   position: relative;
   vertical-align: center;
   display: inline-block;
   text-align: center;


   
}

#botones-reserva a{
   text-decoration: none;
   width: 22%;
   height: 43px;
   margin: 4px 1% 4px 1%;
   text-align: center;
   position: relative;
   display: inline-block;
   background-color: #CCB489;
   border-radius: 8px;
   box-shadow: 0px 0px 30px #4C2B14;
}

#botones-reserva a:after{
   position: relative;
   font-family: 'icomoon';
   color:#4C2B14;
   font-size: 17vw;
   bottom:10px;
   text-align: center;
   
   
}
#botones-reserva a:nth-child(1):after{
   
   content:"\e927";

}

#botones-reserva a:nth-child(2):after{
   
   content:"\e936";

}

#botones-reserva a:nth-child(3):after{
   left: -17%;
   content:"\e902";

}

#botones-reserva a:nth-child(4):after{
   
   content:"\e92e";

}

¿Alguien puede ayudarme?