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

HTML-CSS
1

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:
https://codepen.io/noblegas/pen/XWWRbZZ

2

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

3

give which code different ids?

4

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

5

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

6

@noblegas87 hi,

you can try this

.nav-items li {
    display:inline-block;
    float: right;

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

Summary 
//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
7

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

8

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

toDel
toDel1366×545 39 KB

1 Like
9

Thanks. I apply your recommended changes.

10

@Cirediallo

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.

11

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

12

@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
14

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