Header navigation position-CodePudding

So, I've been doing a project for my school and i've came up with idea of fitness (not important). I set up logo and when i started the actual navigation I.. idk.. so i want my navigation to be aligned on the right side but all i tried didnt change position. anyone help ? Here's the actual code

HTML

        <header>
        <div >
            <img src="./img/fit-logo.png" alt="logo" width="120" height="120">
        </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="index-about-us.html">About us</a></li>
                    <li><a href="index-trainings.html">Trainings</a></li>
                    <li><a href="index-news.html">News</a></li>
                    <li><a href="index-contact-us.html">Contact Us</a></li>
                </ul>
            </nav>
    </header>

CSS

*{
margin:0;
padding:0;
border:0;
}

::selection {
    background-color: lightcoral;
}

body {
    background-color: gray;
    width:100%;
    height:100%;
}

.flex {
    display:flex;
}

.logo {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    pointer-events: none;
    margin: 0 110px;
    float:left;
}

nav {
    align-items: center;
    justify-content: space-between;
}

CodePudding user response：

As I understand your question, you need to navigation like this. right?

For that, you need to have an idea about flexbox. You can refer this article for basic flexbox knowledge.

CSS Flexbox from W3Schools.

And this is the code for your navigation.

HTML

<header>
  <nav>
    <ul>
      <li > <img src="./img/fit-logo.png" alt="logo" width="120" height="120"></li>
      <li><a href="#">Home</a></li>
      <li><a href="index-about-us.html">About us</a></li>
      <li><a href="index-trainings.html">Trainings</a></li>
      <li><a href="index-news.html">News</a></li>
      <li><a href="index-contact-us.html">Contact Us</a></li>
    </ul>
  </nav>
</header>

CSS

*{
margin:0;
padding:0;
border:0;
}
ul{
  list-style-type: none;
  display: flex;
  justify-content: right;
  background-color: #1F1D36;
}

.logo{
  flex:1;
}

li{
  float: left;
}

li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  color: white;
  font-family: Poppins;
}

CodePudding user response：

You can use navigation item to display inline.

*{
margin:0;
padding:0;
border:0;
}

::selection {
    background-color: lightcoral;
}

body {
    background-color: gray;
    width:100%;
    height:100%;
}

.flex {
    display:flex;
}

.logo {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    pointer-events: none;
    margin: 10px;
    float:left;
}

nav {
    align-items: center;
    justify-content: space-between;
}
nav ul li {
      display: inline;
      padding:10px;
      float:right
}

<header>
        <div >
            <img src="./img/fit-logo.png" alt="logo" width="120" height="120">
        </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="index-about-us.html">About us</a></li>
                    <li><a href="index-trainings.html">Trainings</a></li>
                    <li><a href="index-news.html">News</a></li>
                    <li><a href="index-contact-us.html">Contact Us</a></li>
                </ul>
            </nav>
    </header>