Display:Inline-Block Ignored - css

Question

This is driving me insane, and I just can't figure out the cause. I have a JSP application that is connected to bootstrap. First of all, I am by no means an expert in CSS, and am green in that area. My issue is that inline-block just will not work. My bootstrap is used for the collapse plugin that allows me to use a menu button instead of the regular menu in smartphones.
When I use a desktop-size, the menu items are displayed in block format (vertical), even though I have used display: inline-block. Here's my code, and if anyone has an idea why inline-block is not working please let me know.
The html:
<ul id="menu-items" class="navbar-collapse collapse menubar-items">
<li>
<a class="menuItems" href="home.jsp">Home</a>
</li>
<li>
<a class="menuItems" href="business.jsp">Business</a>
</li>
<li>
<a class="menuItems" href="new-form.jsp">New Order</a>
</li>
<li>
<a class="menuItems" href="logout.do">Logout</a>
</li>
</ul>
The css:
#menu-items {
min-width: 250px;
background: #CFC3F8;
box-shadow: 5px 5px 2px #888888;
padding: 0;
float: right;
}
#menu-items li {
height: 100%;
width: 100%;
margin-right: 10px;
text-decoration: none;
vertical-align: middle;
text-align: center;
line-height: 60px;
font-size: 16px;
border-left: solid white 2px;
color: #332419;
//The attempt
display: inline-block;
}
#menu-items li a.menuItems {
height: 100%;
width: 100%;
}
#menu-items li a.menuItems:hover {
color: #332419;
background-color: #f1f1f1;
}
//ensuring that bootstrap doesn't override it
.navbar-collapse li {
display: inline-block;
text-decoration: none;
}
.collapse li {
display: inline-block;
text-decoration: none;
}
ul li {
display: inline-block;
text-decoration: none;
}