'How to move navigation text to the left?

What is the best method using flex to move the logo text to the left?

I have tried flex-start - and I have also tried float - left.

However, both method doesn't work.

/* Navigation */
.navigation-container {
    position: fixed;
    top: 0;
    width: 78.8%;
    display: flex;
    justify-content: flex-end;
}

.logo {
  
}

.navigation-items {
  display: flex;
  justify-content: center;
}

.footer-items {
  display: flex;
  justify-content: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<!-- Container -->
<div class="container">
  <!-- Navigation -->
  <div class="navigation-container">
    <span class="background"></span>
    <!-- Results Nav-->
    <span class="navigation-items" id="resultsNav">
      <h1 class="logo">logo</h1>
      <h3><i class="fa-solid fa-border-all fa-lg"></i></h3>
      <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h3>
      <h3><i class="fa-solid fa-rotate fa-lg"></i></h3>
    </span>
  </div>
</div>
htmlcssflexbox


Solution 1:[1]

Since you're already using two flex's just add the logo to be the first child of the first flex-container (navigation-container) then set flex-end on the navigation items only.

/* Navigation */
.navigation-container {
    position: fixed;
    top: 0;
    width: 98%;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

body {  
  margin: 0;
}

.navigation-items {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.footer-items {
  display: flex;
  justify-content: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<!-- Container -->
<div class="container">
  <!-- Navigation -->
  <div class="navigation-container">
    <h1 class="logo">logo</h1>
    <span class="background"></span>
    <!-- Results Nav-->
    <span class="navigation-items" id="resultsNav">

      <h3><i class="fa-solid fa-border-all fa-lg"></i></h3>
      <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h3>
      <h3><i class="fa-solid fa-rotate fa-lg"></i></h3>
    </span>
  </div>
</div>

Solution 2:[2]

Please try this code I think it will be helpful for you

/* Navigation */

.container {}

/* Navigation */
.navigation-container {  
   position: fixed;
   top: 0; 
   left: 0; 
   right: 0;
   padding: .3rem 8%; 
}

.navigation-items {  
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.navigation-items h3 i{
    margin: 1.3rem 0 0;
}

.logo {
    margin-right: auto;
}

 <!-- Container -->
     <div class="container">
        <!-- Navigation -->
        <div class="navigation-container">
          <span class="background"></span>
          <!-- Results Nav-->
          <span class="navigation-items" id="resultsNav">
            <h1 class="logo">logo</h1>
            <h3><i class="fa-solid fa-border-all fa-lg"></i></h3>
            <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h3>
            <h3><i class="fa-solid fa-rotate fa-lg"></i></h3>
          </span>
        </div>
      </div>

Solution 3:[3]

Use text align property on the logo.

text-align: left;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kameron
Solution 2 Parves Molla
Solution 3 Joy Dey

Related Questions