Почему плывет верстка данного элемента? Как поправить?

Question

[Dreaded]

В данный момент прохожу учебный курс по PHP , и делаю задания по учебному проекту.
К сожалению, познания в верстке и CSS у меня очень поверхностные, и я никак не могу разобраться почему у меня плывет верстка ? Первый вариант это учебная страничка на чистом HTML + CSS, там всё отображается ровно

https://i.imgur.com/tdz4EGK.jpg

А второй вариант - скопированный код из этой странички , который подгружается как php шаблон. Единственное что изменено в коде - это подстановка значений, в зависимости от запрашиваемого id. То есть ни к HTML, ни к CSS я даже не прикасался. Но почему то (даже если я подгружаю просто чистый HTML код как шаблон php) у меня плывет верстка.

https://i.imgur.com/wyjdtrl.jpg

Подскажите как это поправить?

На всякий случай приложу описание стилей "nav" , "nav__list" и "containter" :

.nav {
  background-color: #ffffff;
  border-bottom: 1px solid #e1e6e7;
}
 
.nav__list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
 
.container {
  width: 1110px;
  margin: 0 auto;
  padding: 0 15px;
}