CSS Navbar items are not in order? - html

Question

I have my navbar items in the order of "offerings," "about," and "contact us."
On the live website it is "about" then "contact us" then "offering"
Is there some sort of code or div grouping I can use to make sure they display in the order listed?
Pasting the code from my application.html.erb:
div class="navbar-order">
<ul class="nav navbar-nav navbar-right">
<div class="dropdown">
<button class="dropbtn"><li><%= link_to "Offerings", offerings_path %></li></button>
<div class="dropdown-content">
<li><%= link_to "Public Speaking", pages_public_speaking_path %></li>
<li><%= link_to "Nonverbal Communication", nonverbal_path %></li>
<li><%= link_to "Group Dynamics", group_dynamics_path %></li>
<li><%= link_to "Intercultural Communication", intercultural_communication_path %></li>
<li><%= link_to "Editing", editing_path %></li>
<li><%= link_to "Interviewing", interviewing_path %></li>
<li><%= link_to "Business Etiquette", business_etiquette_path %></li>
<li><%= link_to "Business Writing", business_writing_path %></li>
</div>
</div>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact Form", new_contact_path %></li>
</ul>
</div>

Answer 1

ul {
display:flex;
list-style-type: none;
}
ul li {
margin-right:20px;
}
<nav>
<ul>
<li>The</li>
<li> Correct</li>
<li>Order</li>
</ul>
</nav>
Try to re-structure Your HTML nav markup.
The point is that You should put <li>'s in the <ul> and not the divs. If You create the markup properly and put some
display:flex or display:inline-block on the <ul>, there is no way that it's displayed in the broken order