Cannot change the font of the menu to bolder in Chrome DevTools

Question

My website is at https://www.datanumen.com/

I want to change the font of the menu items to bolder, so I do as follows:

1. Open it in Chrome
2. Click "DevTools"
3. Go to the first menu item "Products" and right click "Inspect".
4. Then I find the menu item

 <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"><a href="https://www.datanumen.com/products/">Products</a></li>

5. Then in the right hand, I click "+" to add a style for it, as follows:

li.menu-item.menu-item-type-post_type.menu-item-object-page {
    font-weight: bolder;
}

I hope to make all the menu items bolder, so I choose the specifier as specific as to the menu-item-object-page instead of menu-item-161.

Then after doing that, nothing happens. The menu items does not become bolder at all.

Below is what I do:

Just wonder what I do wrong? Thank you very much.

Update

Have just use the following css rule to bold the menu items:

#menu-main-menu-1 li a {
    font-weight: bold;
}

But one more question is that it seems bold and bolder are completed same, see below:

Answer 1

In your css you missed "a"

li.menu-item.menu-item-type-post_type.menu-item-object-page a {
    font-weight: bolder;
}

Always choose id over classes as id's are unique so no confusion, as you have id in your ul tag

give the following css

#menu-main-menu-1 li a {
    font-weight: bolder;
}