Search code examples
htmlcsshtml-lists

Bottom border on li element

I am trying to add a bottom border to my li elements. 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?

.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;
}
<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>

Solution

  • try adding;

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

    Your code is working fine here without any changes.