Дисплей: Flex и Levifie-Content: Spaceweed Между всегда оставляет неровное пространство на правом и левом краю ⇐ Html

[Anonymous]

Я прохожу курс о веб -разработке, и я полный новичок, так что, пожалуйста, не судите меня. У меня есть задание, где мне нужно воссоздать скриншот страницы. У меня проблемы с толканием DOV от нижнего колонтитула влево и вправо, и у них равное пространство между DIV и краем экрана. Это должно быть результатом, и это то, что у меня есть. < /P>

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

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
height: 100vh;
margin: 0;
overflow: hidden;
font-family: Roboto, sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
}

img {
width: 600px;
}
ul{
list-style-type: none;
}
button {
font-family: Roboto, sans-serif;
border: none;
padding: 8px 15px 8px 15px;
border-radius: 8px;
background: #eee;
}

input {
border: 1px solid #ddd;
border-radius: 16px;
padding: 8px 24px;
width: 400px;
margin-bottom: 16px;
background-color: gainsboro;
}

.header{
display: flex;
justify-content: space-between;
}
.left-links{
display: flex;
flex-direction: row;
gap: 10px;
}
.right-links{
display: flex;
flex-direction: row;
gap: 10px;
}
a{
text-decoration: none;
color: black;
}
.content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
}
.footer{
display: flex;
background-color: gainsboro;
}< /code>






LAYOUT
[*]



[list]
[url=#]About[/url]
[*][url=#]Store[/url]
[/list]
[list]
[*][url=#]Profile[/url]
[*][url=#]Settings[/url]
[/list]

[img]./logo.png[/img]



Do the thing!
Do the other thing!



[list]
[*][url=#]Advertising[/url]
[*][url=#]Business[/url]
[/list]
[list]
[*][url=#]Privacy[/url]
[*][url=#]Terms[/url]
[/list]

Я попытался сделать это либо с помощью ustify-content: space-betweed , и я думал об использовании wext-start и wex-end атрибуты>, но они тоже не работали.

Подробнее здесь: https://stackoverflow.com/questions/769 ... space-at-t