Мой код, запускаемый через локальный хост, отображается так, как я хочу. У меня есть адаптивная сетка, которая идеально выровнена. Однако точный код на сервере Bluehost отображает сетку, которая не идеально выровнена и не реагирует.
Ниже приведен некоторый код, но на самом деле это просто общий вопрос: почему один и тот же код выполняется в одном месте в localhost, но немного отличается в узле сервера?
<main id="art-collection" onclick="changeImage(event)">
<img src="assets/img/loveandpeace.jpg" class="art-pieces">
<img src="assets/img/elcoyote.jpg " class="art-pieces">
<img src="assets/img/enflor.jpg " class="art-pieces">
<img src="assets/img/farmlife.jpg " class="art-pieces">
CSS:
main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
grid-gap: 1rem;
margin-top: 1rem;
}
main img {
width: 100%;
}