No se si el profesor explica o no pero al hacer hover sobre los botones, estos se descolocan un poco es decir, se mueven como 1px hacia l...

Logre solucionarlo con flexbox, efectivamente el margin y padding hacia que se muevan, y como necesitaba que tengan un espacio entre cada botón debían tener un margen pero como eso hacia que se muevan los botones, utilice Flexbox para pegar cada botón a los costados y achicar la caja para que parezca que están mas juntos.

Sí. Los botones se mueven porque no tienen un borde en su estado inicial, y al asignarle un borde en su estado :hover, el botón cambia de tamaño y el navegador trata de volver a centrar ambos botones.

Puedes solucionarlo asignándole un borde del mismo tamaño, con el color de fondo del contenedor, al igual que lo harías cuando tenga el :hover. Otra opción es crear un borde del mismo tamaño pero transparente. Revisa la imagen de ejemplo que te adjunto.

Hola Calvarenga96

En ese caso te recomiendo que al definir los estilos del hover te asegures de que no tenga un margin, borde o padding. O de tenerlo, que sea el mismo del estado natural del elemento. Puede que por defecto te esté agregando un margin o algo así en el hover. Entonces asegúrate colocando

margin: 0;
padding: 0;