My logo text sticks to the left of my page eventhough i have it set to centered-CodePudding

So I want my navbar to be so that the Work and Press elements are aligned on the left side, the YORK logo text in the center and the About and Contact elements on the right. So far i've managed to make it so that the left and right works, but for some reason i cant seem to find my York logo sticks to the left side.

I tried to change what classes i gave the flex property to. I tried to change the way i set up the html as well.

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 >
    <div >Work</div>
    <div >Press</div>
  </nav>
  <div >YORK</div>
  <nav >
    <div >About</div>
    <div >Contact</div>
  </nav>
</header>

CodePudding user response：

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 >
        <div >Work</div>
        <div >Press</div>
      </nav>
      <div >YORK</div>
      <nav >
        <div >About</div>
        <div >Contact</div>
      </nav>
    </header>

I've added a justify-content: space-between to your header.

Removed the position absolute from your nav-right.

Hope this helps.

CodePudding user response：

I did two editions to your css, remove two declarations that was broken your position in .nav-right {} declaration and add justify-content: space-between; to header {} declaration, let me know if is working for you now.

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 >
        <div >Work</div>
        <div >Press</div>
      </nav>
      <div >YORK</div>
      <nav >
        <div >About</div>
        <div >Contact</div>
      </nav>
    </header>

CodePudding user response：

You need to add width: 100%; to the .nav-center-logo, but this will not center the logo perfectly. Also add position: absolute; to the .nav-center-logo and position: relative; to the parent element (i.e., header).

See the snippet below.

body {
  font-family: europa, sans-serif;
  padding-left: 3vw;
  padding-right: 3vw;
}

header {
  display: flex;
  position: relative; /* Added */
}

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;
  position: absolute; /* Added */
  width: 100%; /* Added */
}

<header id="header">
  <nav >
    <div >Work</div>
    <div >Press</div>
  </nav>
  <div >YORK</div>
  <nav >
    <div >About</div>
    <div >Contact</div>
  </nav>
</header>