Can't figure out why my display:inline block css code is not working for my navbar

The links for my navbar are supposed to horizontally next to one another. They are not supposed to be vertically stacked onto one another.
The link is here:

give them both a diffrend id’s and then assign diffrend positions to them in ur css?

give which code different ids?

well what is your issue?
The links for my navbar
then which part could it be?

My issue is that the links would not line up horizontally when I write display:inline-block;

@noblegas87 hi,

you can try this

.nav-items li {
    float: right;

but that will present a problem… because you have other elements in that container that are block elements.

//hide this for now, because you will not be using it, it's messing with your other elements

.navbar-header {
  display: none;

//you want to float the <ul> element instead of the <li>

.nav-items {
  display: inline-block;
  float: right;
  list-style: none;

// don't know how to explain it, but I've never really done class to class combinators 
//like .nav-items .navlink {}
.nav-items li{
   display: inline-block;
1 Like

thats why i suggested to change the id of the nav bar. by changing the position like using the z-index they can avoid that issue even if there block if there the lowest on on the card deck it should’t intervene :3

I’m just going to add a picture you can see if this is what you want or I added some outline so you can target specificly what you need. You can see the result below and all the code are in the screenshot

1 Like

Thanks. I apply your recommended changes.


hey mate, I see that you’re using flex which is the easy solution. but I think he’s trying to solve this with inline-block.

No matter which kind of display he want to use the most important is he has to target to right element and apply them the display he want. inline-block, flex, grid we can do almost same things with all of them

@Cirediallo you are absolutely right, however, the point is that as a learner, we should have a good grasp of the current topic before using other much easier solutions. If he uses flex now, it may cause him/her some same trouble in the future. So, just my 2c, ‘do not skip steps’ - especially in programming.

1 Like

You should apply the display: inline-block to the li element, otherwise you are setting the a to be a inline block with reference to its parent element, which is the li