Почему ширина слева от центра страницы больше, чем справа? ⇐ CSS

[Anonymous]

Я пытаюсь создать расширение Chrome, и все работает нормально, за исключением этой странной проблемы.
Я использую Flexbox для структурирования страницы. Все выравнивается и сидит правильно, но я только что заметил, что левая сторона от центра страницы имеет большую ширину, чем правая. Так что центр на самом деле не центр.
Я не могу найти решение этой проблемы. Я пробовал играть с полями и контейнерами практически с каждым элементом. Я также подумал, что, возможно, буквы «em» в тексте могут что-то испортить, потому что у меня фиксированная ширина тела (480 пикселей), но я провел некоторое тестирование и, похоже, проблема не в этом.
У меня закончились идеи. Любая подсказка, что происходит и как это исправить? Спасибо.
Вот мой HTML:

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

LyricsFetch


Artist - Title
Looking for your lyrics...


Contacts
[list]
[*][url=mailto:#]support@lyricsfetch.org[/url]
[*]Visit our [url=https://www.patreon.com/]Patreon[/url]
[*]Powered by [url=https://lyrics.ovh/]lyrics.ovh[/url]
[/list]

[url=https://www.instagram.com/]
[img]https://img.icons8.com/?size=100&id=32309&format=png&color=000000[/img]
[/url]
[url=https://twitter.com/?lang=en-GB]
[img]https://img.icons8.com/?size=100&id=A4DsujzAX4rw&format=png&color=000000[/img]
[/url]
[url=https://www.youtube.com/]
[img]https://img.icons8.com/?size=100&id=37326&format=png&color=000000[/img]
[/url]

Это CSS:

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

body {
width: 480px;
background-color: #00FF9A;
}

header, main, footer {
width: 100%;
padding: 1em;
}

header, footer {
background-color: #303030;
color: white;
}

main {
color: #303030;
}

h1 {
text-align: center;
}

p, a, li {
margin-top: 0.25em;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 1.5em;
}

h3 {
font-size: 1.25em;
}

a {
text-decoration: none;
color: #00FF9A;
}

a:hover {
text-decoration: underline;
}

.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
min-height: 100vh;

}

.footerImages {
display: flex;
justify-content: space-around;
}

.footerImages img {
width: 1.5em;
}

Я также использую сброс CSS от Meyerweb.
Вот скриншот проблемы, по крайней мере, лучшее, что я мог сделать.



Подробнее здесь: https://stackoverflow.com/questions/786 ... n-the-righ