Sean Sean - 17 days ago 7
CSS Question

How to Get Menu Items on Same Row

If you look at the menu, you'll notice that all of the menu items are aligned left within a container in a single column. But what I want is for them to spread out evenly in a single row, and then to collapse into a hamburger menu at tablet and mobile size.

I know that

is by default a block element, so I tried giving the
with the id
and the class of
a style of


But nothing's happening.

I also tried assigning


to the div that encompasses the ul, which has a class of
, but that didn't work either. Once I'm able to distribute the menu items evenly in a single row, I'll be able to create the hamburger menu. This is a perfect example of how we want the menu to behave.


Close! The list item (li) elements need to have display: inline-block;, not the list itself (ul).

This will work:

.menu-item {
  display: inline-block;
  margin-right: 10px; /* add a gap between items */