When I align a few buttons to the right, the order of those buttons changes. I have included an image for reference. View Navbar Image
This is the code I am currently using:
.btn{
float: left;
padding: 1.7em;
text-align: center;
display: inline-block;
border: none;
cursor: pointer;
color: white;
}
.navbar{
float: left;
background-color: #47476b;
}
.btnff{
-webkit-transition-duration: 0.7s;
transition-delay: 0.1s;
}
.btnff:hover{
background-color: black;
}
.active{
background-color: limegreen;
}
.right{
float: right;
}<div>
<button class="btn btnff navbar active" type="submit">Button 1</button>
<button class="btn btnff navbar" type="submit">Button 2</button>
<button class="btn btnff navbar" type="submit">Button 3</button>
<button class="btn btnff navbar" type="submit">Button 4</button>
<button class="btn btnff navbar" type="submit">Button 5</button>
<button class="btn btnff navbar" type="submit">Button 6</button>
<button class="btn btnff navbar" type="submit">Button 7</button>
<button class="btn btnff navbar right" type="submit">Button 8</button>
<button class="btn btnff navbar right" type="submit">Button 9</button>
</div>How can I ensure that Button 9 and 8 appear in the correct order? Also, how can I make the color of the buttons stretch the entire width of the screen to eliminate the white space between the left and right buttons?