我的标志文本粘在我的页面的左边，即使我把它设置为居中

Question

所以我希望我的导航栏是这样的，使工作和Press元素在左侧对齐，YORK标志文本在中心，About和Contact元素在右侧。到目前为止，我已经设法使左右工作，但由于某种原因，我似乎找不到我的纽约标志粘在左边。

我试图改变我给flex属性的类。我也试着改变我设置html的方式。

body {
font-family: europa, sans-serif;
padding-left: 3vw;
padding-right: 3vw;
}
header {
display: flex;
}
nav {
display: flex;
}
.nav-left-press,
p {
color: #b3b3b3;
margin-left: 1vw;
}
.nav-right-about,
p {
color: #b3b3b3;
}
.nav-right-contact,
p {
color: #b3b3b3;
}
.nav-left {
text-align: left;
}
.nav-right {
text-align: right;
position: absolute;
right: 3vw;
}
.nav-center-logo {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}

<header id="header">
<nav class="nav-left">
<div class="nav-left-work">Work</div>
<div class="nav-left-press">Press</div>
</nav>
<div class="nav-center-logo">YORK</div>
<nav class="nav-right">
<div class="nav-right-about">About</div>
<div class="nav-right-contact">Contact</div>
</nav>
</header>

Answer 1

body {
font-family: europa, sans-serif;
padding-left: 3vw;
padding-right: 3vw;
}
header {
display: flex;
justify-content: space-between;
}
nav {
display: flex;
}
.nav-left-press,
p {
color: #b3b3b3;
margin-left: 1vw;
}
.nav-right-about,
p {
color: #b3b3b3;
}
.nav-right-contact,
p {
color: #b3b3b3;
margin-left: 1vw;
}
.nav-left {
text-align: left;
}
.nav-right {
}
.nav-center-logo {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}

<header id="header">
<nav class="nav-left">
<div class="nav-left-work">Work</div>
<div class="nav-left-press">Press</div>
</nav>
<div class="nav-center-logo">YORK</div>
<nav class="nav-right">
<div class="nav-right-about">About</div>
<div class="nav-right-contact">Contact</div>
</nav>
</header>

我已经给你的页眉添加了一个justify-content: space-between。

从导航栏右侧移除绝对位置。

希望对你有帮助。

Answer 2

我对你的css做了两个版本，删除了两个声明，这些声明打破了你在.nav-right {}声明中的位置，并将justify-content: space-between;添加到header {}声明中，让我知道现在是否为你工作。

body {
font-family: europa, sans-serif;
padding-left: 3vw;
padding-right: 3vw;
}
header {
display: flex;
justify-content: space-between;
}
nav {
display: flex;
}
.nav-left-press,
p {
color: #b3b3b3;
margin-left: 1vw;
}
.nav-right-about,
p {
color: #b3b3b3;
}
.nav-right-contact,
p {
color: #b3b3b3;
}
.nav-left {
text-align: left;
}
.nav-right {
/* text-align: right;
position: absolute; */
right: 3vw;
}
.nav-center-logo {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}

<header id="header">
<nav class="nav-left">
<div class="nav-left-work">Work</div>
<div class="nav-left-press">Press</div>
</nav>
<div class="nav-center-logo">YORK</div>
<nav class="nav-right">
<div class="nav-right-about">About</div>
<div class="nav-right-contact">Contact</div>
</nav>
</header>