Как исправить основную проблему с отображением моего адаптивного дизайна? ⇐ CSS

[Anonymous]

Я пишу страницу прямо сейчас как проект и пытаюсь сделать ее отзывчивой, но что-то в моем коде заставляет «social_links» прилипать влево после ширины экрана 560 пикселей, но она должна оставаться в центре, как и осталась когда ширина не узкая. Я удалил части, не относящиеся к моей проблеме, поскольку она уже длинная.

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

* {
box-sizing: border-box;
list-style: none;
}

body {
align-items: center;
margin: 0;
padding: 0;
display: grid;
place-items: center;
}

.container {
width: 30em;
margin: 4em;
}

.social__links ul li {
width: 100%;
margin: 1.2rem 0;
padding: 0.4rem 0.8rem;
perspective: 500px;
user-select: none;
}

.js-tilt-glare {
border-radius: 5px;
}

.social__links ul li a {
width: 100%;
display: flex;
align-items: center;
}

span {
border-bottom: none;
}

.social__links ul li a i {
text-align: center;
line-height: 4rem;
padding: 10px 20px;
transform: scale(1.4) translateZ(50px);
transition: 0.25s;
}

.social__links ul li a span {
line-height: 1.4rem;
}

@media only screen and (max-width: 549px) {
.container {
width: 88vw;
}
}

@media all and (max-width: 1158px) {
.navbar .links {
display: none;
}
.navbar .toggle {
display: block;
}
.dropdown_menu {
display: block;
}
.msg {
font-size: 18px;
}
#br {
width: 35%;
}
}

@media all and (max-width: 576px) {
.social__links p {
font-size: 18px;
margin-top: 0.5rem;
}
}

@media (max-width: 768px) {
.social__links ul li {
padding: 0.3rem 0.6rem;
}
.social__links ul li a i {
font-size: 1.5rem;
line-height: 3rem;
padding: 8px 16px;
}
.social__links ul li a span {
font-size: 0.9rem;
}
}

@media (max-width: 576px) {
.social__links ul li {
padding: 0.2rem 0.4rem;
width: 100%;
margin: 1rem 0;
padding: 0.2rem 0.5rem;
text-align: center;
}
.social__links ul li a i {
line-height: 2.4rem;
padding: 6px 12px;
}
.social__links {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
}
.social__links ul {
padding: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.social__links ul li a {
display: flex;
align-items: center;
justify-content: center;
}
}

.social__links p {
font-size: 18px;
margin-top: 0.5rem;
}

@media (max-width: 460px) {
.social__links ul li a h3 {
font-size: 1rem;
}
.social__links ul li a p {
font-size:  0.8rem;
}
}

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

[*]/>



[list]


[url=...]
[i][/i]

...
...

[/url]

[*]
[url=...]
[i][/i]

...
...

[/url]

[*]
[url=...]
[i][/i]

...
...

[/url]

[*]
[url=...]
[i][/i]

...
...

[/url]

[/list]

Подробнее здесь: https://stackoverflow.com/questions/787 ... ive-design