skip to Main Content

I can’t find why flex-end isn’t working on my site, I know there’s something interrupting it but I just can’t manage to find it.

For anyone interested in helping here’s the code, I’m trying to only align navbar-links-end and navbar-links-middle to end of navbar :

That’s all details you should know, if there’s anything else just post a comment, I will answer as soon as I can

body {
  font-family: 'Roboto', sans-serif;
}

.navbar {
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  position: fixed;
  background: white;
  margin-left: auto;
  border-bottom: 1px solid black;
  width: 70px;
  height: 70px;
}

.navbar-logo {
  justify-content: flex-start;
}

.navbar-links-left {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  align-items: center;
  /* add this property */
  width: auto;
}

.navbar-link {
  margin-right: 2rem;
  color: #0068b5;
  font-size: 16px;
  align-items: center;
}

.navbar-links-middle {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  align-items: center;
  /* add this property */
  width: auto;
}

.navbar-links-end {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  align-items: center;
  /* add this property */
  margin-left: auto;
  width: auto;
}
<nav class="navbar">
  <img class="navbar-logo" src="images/intel-header-logo.png">
  <ol class="navbar-links-left">
    <li class="navbar-link">
      <p>PRODUCTS</p>
    </li>
    <li class="navbar-link">
      <p>SUPPORT</p>
    </li>
    <li class="navbar-link">
      <p>SOLUTIONS</p>
    </li>
    <li class="navbar-link">
      <p>DEVELOPERS</p>
    </li>
    <li class="navbar-link">
      <p>PARTNERS</p>
    </li>
  </ol>

  <ol class="navbar-links-middle">
    <li class="navbar-link">
      <i class="far fa-user"></i>
    </li>
    <li class="navbar-link">
      <i class="fa-solid fa-globe"></i>
    </li>
    <li class="navbar-link" style="white-space: nowrap;">
      <p>USA (ENGLISH)</p>
    </li>
  </ol>

  <ol class="navbar-links-end">
    <li class="navbar-link">
      <i class="fa-solid fa-magnifying-glass"></i>

    </li>
    <li class="navbar-link" style="white-space: nowrap;">
      <p>Search: Intel.com</p>
    </li>
  </ol>
</nav>

2

Answers


  1. Why do you have .navbar{width:70px}? It should be 100%:

    body {
      font-family: 'Roboto', sans-serif;
    }
    
    .navbar {
      top: 0;
      left: 0;
      display: flex;
      flex-direction: row;
      position: fixed;
      background: white;
      margin-left: auto;
      border-bottom: 1px solid black;
      width: 100%;
      height: 70px;
    }
    
    .navbar-logo {
      justify-content: flex-start;
    
    }
    
    .navbar-links-left {
      display: flex;
      justify-content: flex-start;
      list-style-type: none;
      align-items: center; /* add this property */
      width: auto;
    
    }
    
    .navbar-link {
      margin-right: 2rem;
      color: #0068b5;
      font-size: 16px;
      align-items: center;
    }
    
    .navbar-links-middle {
      display: flex;
      justify-content: flex-end;
      list-style-type: none;
      align-items: center; /* add this property */
      width: auto;
    }
    
    
    .navbar-links-end {
      display: flex;
      justify-content: flex-end;
      list-style-type: none;
      align-items: center; /* add this property */
      margin-left: auto;
      width: auto;
    
    
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>My Website</title>
        <link rel="stylesheet" href="styles.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    </head>
    <body>
    
    
    
        <nav class="navbar">
            <img class="navbar-logo" src="images/intel-header-logo.png">
            <ol class="navbar-links-left">
                <li class="navbar-link">
                    <p>PRODUCTS</p>
                </li>
                <li class="navbar-link">
                    <p>SUPPORT</p>
                </li>
                <li class="navbar-link">
                    <p>SOLUTIONS</p>
                </li>
                <li class="navbar-link">
                    <p>DEVELOPERS</p>
                </li>
                <li class="navbar-link">
                    <p>PARTNERS</p>
                </li>
            </ol>
    
            <ol class="navbar-links-middle">
                <li class="navbar-link">
                    <i class="far fa-user"></i>
                </li>
                <li class="navbar-link">
                    <i class="fa-solid fa-globe"></i>
                </li>
                <li class="navbar-link" style="white-space: nowrap;">
                    <p>USA (ENGLISH)</p>
                </li>
            </ol>
    
            <ol class="navbar-links-end">
                <li class="navbar-link">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    
                </li>
                <li class="navbar-link" style="white-space: nowrap;">
                    <p>Search: Intel.com</p>
                </li>
            </ol>
        </nav>
    
    
    
    </body>
    </html>
    Login or Signup to reply.
  2. Change .navbar to width: 100%;.

    Remove margin-left: auto; on .navbar-links-end and put it on .navbar-links-middle instead.

    body {
      font-family: 'Roboto', sans-serif;
    }
    
    .navbar {
      top: 0;
      left: 0;
      display: flex;
      flex-direction: row;
      position: fixed;
      background: white;
      margin-left: auto;
      border-bottom: 1px solid black;
      width: 100%;
      height: 70px;
    }
    
    .navbar-logo {
      justify-content: flex-start;
    }
    
    .navbar-links-left {
      display: flex;
      justify-content: flex-start;
      list-style-type: none;
      align-items: center;
      /* add this property */
      width: auto;
    }
    
    .navbar-link {
      margin-right: 2rem;
      color: #0068b5;
      font-size: 16px;
      align-items: center;
    }
    
    .navbar-links-middle {
      display: flex;
      justify-content: flex-end;
      list-style-type: none;
      align-items: center;
      /* add this property */
      margin-left: auto;
      width: auto;
    }
    
    .navbar-links-end {
      display: flex;
      justify-content: flex-end;
      list-style-type: none;
      align-items: center;
      /* add this property */
      width: auto;
    }
    <head>
        <title>My Website</title>
        <link rel="stylesheet" href="styles.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    </head>
    
    <nav class="navbar">
      <img class="navbar-logo" src="images/intel-header-logo.png">
      <ol class="navbar-links-left">
        <li class="navbar-link">
          <p>PRODUCTS</p>
        </li>
        <li class="navbar-link">
          <p>SUPPORT</p>
        </li>
        <li class="navbar-link">
          <p>SOLUTIONS</p>
        </li>
        <li class="navbar-link">
          <p>DEVELOPERS</p>
        </li>
        <li class="navbar-link">
          <p>PARTNERS</p>
        </li>
      </ol>
    
      <ol class="navbar-links-middle">
        <li class="navbar-link">
          <i class="far fa-user"></i>
        </li>
        <li class="navbar-link">
          <i class="fa-solid fa-globe"></i>
        </li>
        <li class="navbar-link" style="white-space: nowrap;">
          <p>USA (ENGLISH)</p>
        </li>
      </ol>
    
      <ol class="navbar-links-end">
        <li class="navbar-link">
          <i class="fa-solid fa-magnifying-glass"></i>
    
        </li>
        <li class="navbar-link" style="white-space: nowrap;">
          <p>Search: Intel.com</p>
        </li>
      </ol>
    </nav>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search