При переходе между страницами сайта изменяется ширина самой страницы.
body {
max-width: 40em;
margin-left: auto;
margin-right: auto;
padding-left: 1em;
padding-right: 1em;
font-size: 1em;
}
header a {
color: gray;
text-decoration: none;
}
header a:hover {
color: blue;
text-decoration: underline;
}
article {
font-size: 1.1875em;
line-height: 150%;
}
img {
max-width: 100%;
}
nav a {
font-weight: bold;
font-style: italic;
display: block;
line-height: 150%;
color: grey;
text-decoration: none;
font-size: 1.1em;
}
nav a:hover {
color: blue;
text-decoration: underline;
}
footer {
text-align: center;
}
footer a {
color: gray;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Головна</title>
</head>
<body>
<header>
<a href=""><h1>UPS</h1></a>
</header>
<nav>
<p>2019 рік</p>
<p>Січень</p>
<a href="article_0.html">Стаття 1</a>
<a href="#">Стаття 1</a>
<a href="#">Стаття 1</a>
<p>Лютий</p>
<a href="#">Стаття 1</a>
<a href="#">Стаття 1</a>
<p>2018 рік</p>
<p>Вересень</p>
<a href="#">Стаття 1</a>
</nav>
<br>
<footer>
<p><a href="">G</a> 18</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Стаття 1</title>
</head>
<body>
<header>
<a href="main.html"><h1>UPS</h1></a>
</header>
<main>
<article>
<h1>Стаття 1</h1>
<p>
Далеко-далеко за словесными горами в стране гласных
и согласных живут рыбные тексты.<a href="#"> просто ссілка</a> Вдали от всех живут
они в буквенных домах на берегу Семантика большого
языкового океана. Маленький ручеек Даль журчит по всей
стране и обеспечивает ее всеми необходимыми правилами.
Эта парадигматическая страна, в которой жаренные члены
предложения залетают прямо в рот.</p>
<img src="images/11.jpg" alt="photo">
<p>Даже всемогущая
пунктуация не имеет власти над рыбными текстами, ведущими
безорфографичный образ жизни. Однажды одна маленькая
строчка рыбного текста по имени Lorem ipsum решила выйти
в большой мир грамматики. Великий Оксмокс предупреждал ее
о злых запятых, диких знаках вопроса и коварных точках с
запятой, но текст не дал сбить себя с толку. Он собрал
семь своих заглавных букв, подпоясал инициал за пояс и
пустился в дорогу.</p>
<img src="images/21.jpg" alt="photo">
<p>Взобравшись на первую вершину курсивных
гор, бросил он последний взгляд назад, на силуэт своего
родного города Буквоград, на заголовок деревни Алфавит
и на подзаголовок своего переулка Строчка. Грустный
реторический вопрос скатился по его щеке и он продолжил свой
путь. По дороге встретил текст рукопись. Она предупредила его:
«В моей стране все переписывается по несколько раз.
Единственное, что от меня осталось, это приставка «и».
Возвращайся ты лучше в свою безопасную страну». Не послушавшись
рукописи, наш текст продолжил свой путь. Вскоре ему
повстречался коварный составитель
</p>
</article>
</main>
<br>
<nav> <p>Почитать еще:</p>
<p>2019 рік</p>
<p>Січень</p>
<a href="#">Стаття 1</a>
<a href="#">Стаття 1</a>
<a href="#">Стаття 1</a>
<p>Лютий</p>
<a href="#">Стаття 1</a>
<a href="#">Стаття 1</a>
<p>2018 рік</p>
<p>Вересень</p>
<a href="#">Стаття 1</a>
</nav>
<br>
<footer>
<p><a href="">G</a> 18</p>
</footer>
</body>
</html>
И такой сдвиг во всех браузерах. Как исправить?