Компоновка плиток проекта приводит к изменению размера верхней навигации ⇐ CSS

[Anonymous]

Я новичок в веб-разработке и пытаюсь создать очень простую личную страницу, содержащую домашнюю страницу с простым текстом, страницу проектов с макетом плиток проекта и блог. У меня возникла проблема с размером (и, следовательно, положением) панели верхней навигации, когда я переключаюсь между страницей плиток проекта и домашней страницей. Когда я нахожусь на главной странице, элементы body имеют немного большую ширину по сравнению со страницей плиток проекта. Из-за этого панель перемещается при переключении между страницами.
Я понял, что расположение плиток влияет на размер панели верхней навигации, но не понимаю, как это решить. Ребята, у вас есть какие-нибудь предложения? Ниже приведен фрагмент кода и CSS. Я использовал онлайн-руководство по созданию адаптивного макета плиток: как исправить эту сложную CSS-сетку фотографий на основе 4 столбцов?

< div class="snippet-code">

Код: Выделить всё

```css
body {
margin: 4px;
margin-right: 10%;
margin-left: 10%;
padding: 20px;
font-family: sans-serif;
color: black;
background-color: white;

}

/* Top nav design */

.topnav {
margin: auto;
background-color:white;
padding:0;
list-style: none;
width: 100%;
text-align: center;
}

.topnav ul li {
display: inline-block;
/* background-color: blue;         */
}

.topnav ul li a {
text-decoration: none;
float: left;
padding: 10px;
color:black;
font-size: 22px;
}

.topnav ul li a:hover {
opacity: 0.5;
}

/* Projects page */

.project-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 56px 40px;
margin: 35px;
list-style: none;
}

.tile a img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* padding: 20px; */
}

/* 1st photo = 2 columns, 2 first rows */
.tile:nth-child(11n +1){
grid-area:span 2/span 2;
}

.tile:nth-child(11n + 10){
grid-area: 3/3/span 2/span 2;
}

.tile:nth-child(11n + 11){
grid-column: span 4;
margin-top: 10px;
}

.tile:nth-child(11n +1),
.tile:nth-child(11n +4),
.tile:nth-child(11n +5){
margin-bottom: 10px;
}

.tile:hover {
transform: scale(1.02);
}

.tile a {
text-decoration: none;
color: white;
}

Website name | Home


[*]

• Home
• Projects
• Blog

Welcome

Some text

Some more text



Home
[*]Projects
[*]Blog
[/list]


Projects

• 
  
  Страница проектов и немного меньшая верхняя панель навигации (около 9 пикселей или около того)
  
  
  
  Подробнее здесь: https://stackoverflow.com/questions/791 ... ize-change