White space in bootstrap menu

Question

Good afternoon,

I’m trying to split a menu with a white line in the middle with css.

I managed to do, but on the right side the menu is with a space without the line and in the items below is the white line also kind of picking the edge of the menu.

The CSS code:

#menu .nav li{
    border-bottom: 1px solid White;
}

.navbar-collapse.collapse {
    padding-left: 0;
    padding-right: 0;
    margin: 0;

}

HTML:

    <div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav">
    {% for category in categories %}
    {% if category.children %}
    <li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle" data-toggle="dropdown">{{ category.name }}</a>
      <div class="dropdown-menu">
        <div class="dropdown-inner"> {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
          <ul class="list-unstyled">
            {% for child in children %}
            <li><a href="{{ child.href }}">{{ child.name }}</a></li>
            {% endfor %}
          </ul>
          {% endfor %}</div>
        <a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a> </div>
    </li>
    {% else %}
    <li><a href="{{ category.href }}">{{ category.name }}</a></li>
    {% endif %}
    {% endfor %}
  </ul>
</div>

Answer 1

The problem is in the size of the element, previously I can say that the element . navbar-Collapse.Collapse is not occupying the total size of . navbar, if this is correct, do it as follows:

.navbar-collapse.collapse { padding-left: 0; padding-right: 0; margin: 0; width: 100% }