Right aligning menu buttons not working w3schools

Question

I'm trying to use the how to right aligned menu button code from w3schools but the search and about button aren't right aligning. I'm not sure why.

I have copied at the code right from the site and it's not working.

.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
 background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

<div class="topnav">
      <a class="active" href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <div class="topnav-right">
        <a href="#search">Search</a>
        <a href="#about">About</a>
      </div>
    </div>

score 0 · Answer 1 · answered Jan 23 '22 at 20:48

Just remove the float: right will work

.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
 background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

<div class="topnav">
      <a class="active" href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <div class="topnav-right">
        <a href="#search">Search</a>
        <a href="#about">About</a>
      </div>
    </div>

Right aligning menu buttons not working w3schools

1 Answers1