Search code examples
htmlcssalignmentnavbar

How can I align the navigation bar to the right


I have tried changing float to right, and changing position and aligning but nothing works. Please help. I can't seem to get it to work no matter what I try. I have tried use other codes that have the navbar to the right but that doesn't work either. Hope that anyone can help me with this problem:)

  <div class="Navigasjon">
            <a class="active1" href="Index.php">Forside</a>
            <a href="Rappernavn.php">Rappere</a>
            <a href="Album.php">Album</a>

        </div>

Here is the CSS

.Navigasjon {
position: absolute;
margin: 14px;
width: 100%;
top: 0px;
background-color: transparent;
overflow: hidden;
}

.Navigasjon a {
float: left;
display: block;
color: Black;
text-align: right;
padding: 18px 22px;
text-decoration: none;
font-size: 18px;
font-weight: 550;
font-family: sans-serif;
}

.Navigasjon a:hover {
background-color: rgb(128, 128, 128, 0.5);
color: black;
}

.active1 {
background-color: rgb(128, 128, 128, 0.5);
}

Solution

  • Optimized code:

    HTML

    <div class="Navigasjon">
      <a class="active1" href="Index.php">Forside</a>
      <a href="Rappernavn.php">Rappere</a>
      <a href="Album.php">Album</a>
    </div>
    

    CSS

    .Navigasjon {
      display: flex;
      justify-content: flex-end;
      margin: 14px;
    }
    
    .Navigasjon a {
      display: block;
      color: black;
      text-align: right;
      padding: 18px 22px;
      text-decoration: none;
      font-size: 18px;
      font-weight: 550;
      font-family: sans-serif;
    }
    
    .Navigasjon a:hover {
      background-color: rgb(128, 128, 128, 0.5);
    }
    
    .active1 {
      background-color: rgb(128, 128, 128, 0.5);
    }