Bottom border on li element

Question

I am trying to add a bottom border to my li elements. This is my css:

.menu{
    text-align:right;
}
.menu li{
    padding:5px;
    text-transform: uppercase;
    display:inline; 
    list-style-type:none;
    list-style-position: inside;

    border-bottom: 1px solid red;
}

And my HTML:

    <div class="menu">
        <ul>
            <li>Home</li>
            <li>Home</li> 
            <li>Home</li> 
            <li>Home</li> 
            <li>Testimonials</li>
            <li>About Us</li>
            <li>Contact Us</li>
        </ul>
    </div>

For some reason, no bottom border is added. I can add a border to the right and left, but not the bottom. What am I doing wrong?

Answer 1

try adding;

html, body{
  margin: 0;
  padding: 0;
}

Your code is working fine here without any changes.