Content centered in local host but changes in gh-pages - html

Question

I have a very simple container that has two svg's in them for buttons. In local host these are centered perfectly and responsive as expected. When I host my project on gh-pages my content with the two svg's in them shift the to the left for some reason. Any ideas?
Code for buttons:
return (
<Container className="button_container">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
className="bi bi-arrow-left-square-fill previousBtn"
viewBox="0 0 16 16"
onClick={previousPage}
>
<path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1z" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
className="bi bi-arrow-right-square-fill nextBtn"
viewBox="0 0 16 16"
onClick={nextPage}
>
<path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1z" />
</svg>
</Container>
);
}
css
.button_container {
display: flex;
justify-content: space-around;
margin: 3em;
}
.previousBtn,
.nextBtn {
color: $white;
border-radius: 5px;
cursor:pointer
}
.previousBtn:hover,
.nextBtn:hover {
opacity: 0.5;
}