positioning two elements to the right and one to the left using flex and align issue-CodePudding

I have an issue, regarding element positioning as well as text alignment: the nav container has three elements: logo, title, nav-list.codepen

/**{
    
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    
    }*/

header {
  background-color: orange;
  url(../images/hero.jpg);
  height: 600px;
  background-size: cover;
}

.fixed-nav {
  list-style: none;
}

.fixed-nav li {
  display: inline-block;
}

nav {
  display: flex;
  justify-content: space-between;
  padding: 30px 40px;
}

.logo {
  height: 25px;
  width: 120px;
}

.title {
  color: white;
  text-transform: uppercase;
  font-family: "Avalors Personal Use", sans-serif;
}

.nav-menu {
  display: flex;
  gap: 1rem;
  /* text-align: center;*/
  list-style: none;
  justify-content: center;
  align-content: center;
}

.nav-menu li {
  font-family: "Avenir LT Std", sans-serif;
  display: inline-block;
  color: white;
  font-size: 16px;
}

.nav-menu li a {
  text-decoration: none;
  color: white;
  /*padding-left:10px;
        padding-right:10px;*/
}

<header>
  <ul >
    <li>phone</li>
    <li>whats</li>
    <li>search</li>
  </ul>
  <nav >
    <a href="#" >
      <img src="#" alt="logo" />
    </a>
    <h2 >
      title
    </h2>
    <ul >
      <li> <a href="#">HOME</a> </li>
      <li> <a href="#">ABOUT</a> </li>
      <li> <a href="#">PRODUCTS</a> </li>
      <li> <a href="#">NEWS</a> </li>
      <li> <a href="#">CONTACT</a> </li>
    </ul>
  </nav>
  <h2>Slogan</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
</header>

i couldn't figure out how to display logo and title to the left and the nav-list to the right. when i use flex to display them horizontally the nav-list children show at the top-left corner. demonstration i tried: text-align, justify-content...with no results. any insight is appreciated.

CodePudding user response：

Make a wrapper for your title and logo.
Apply desired styles to the wrapper.

    <header>
  <ul >
    <li>phone</li>
    <li>whats</li>
    <li>search</li>
  </ul>
  <nav >
    <div class='wrapper'>
      <a href="#" >
        <img src="#" alt="logo" />
      </a>
      <h2 >
        title 
      </h2>
    </div>
    <ul >
      <li> <a href="#">HOME</a> </li>
      <li> <a href="#">ABOUT</a> </li>
      <li> <a href="#">PRODUCTS</a> </li>
      <li> <a href="#">NEWS</a> </li>
      <li> <a href="#">CONTACT</a> </li>
    </ul>
  </nav>
  <h2>Slogan</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
</header>

.wrapper {
  display: flex;
  align-items: center;
}

CodePudding user response：

Try This, It will work!

/**{

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}*/
header {
  background-color: orange;
    url(../images/hero.jpg);
  height: 600px;
  background-size: cover;
}
.fixed-nav {
  list-style: none;
}
.fixed-nav li {
  display: inline-block;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 40px;
}
.logo {
  height: 25px;
}
.title {
  color: white;
  text-transform: uppercase;
  font-family: "Avalors Personal Use", sans-serif;
  margin-left: 10px;
}
.nav-menu {
  display: flex;
  gap: 1rem;
  /* text-align: center;*/
  list-style: none;
  justify-content: center;
  align-content: center;
}
.nav-menu li {
  font-family: "Avenir LT Std", sans-serif;
  display: inline-block;
  color: white;
  font-size: 16px;
}
.nav-menu li a {
  text-decoration: none;
  color: white;
  /*padding-left:10px;
    padding-right:10px;*/
}
.demo {
  display: flex;
  align-items: center;
}

<header>
  <ul >
    <li>phone</li>
    <li>whats</li>
    <li>search</li>
  </ul>
  <nav >
    <div >
    <a href="#" >
      <img src="#" alt="logo" />
    </a>
    <h2 >
      title 
    </h2>
    </div>
    <ul >
      <li> <a href="#">HOME</a> </li>
      <li> <a href="#">ABOUT</a> </li>
      <li> <a href="#">PRODUCTS</a> </li>
      <li> <a href="#">NEWS</a> </li>
      <li> <a href="#">CONTACT</a> </li>
    </ul>
  </nav>
  <h2>Slogan</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
</header>

CodePudding user response：

.nav-menu {
  margin-left: auto;
}