Bootstrap Grid - Панель навигации - Проблема с границами

Question

Я перепробовал опции margins / padding / border во всех отношениях и не могу удалить это пустое пространство с конца моей панели навигации. У кого-нибудь есть простое решение, пожалуйста? Изображение прилагается с подробным описанием вопроса. Спасибо.

HTML:

    <div class="container-fluid">
        <div class="row">
            <ul class="list-inline clearfix">
                <li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
                    <a href="index.html" class="hvr-sweep-to-bottom"><i class="fa fa-home" san-serif hidden="true"></i><span>Home</span></a>
                </li>
                <li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
                    <a href="#" class="hvr-sweep-to-bottom"><i class="fa fa-ticket" aria hidden="true"></i><span>Tickets</span></a>
                </li>
                <li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
                    <a href="#" class="hvr-sweep-to-bottom"><i class="fa fa-commenting" aria hidden="true"></i><span>Video</span></a>
                </li>
                <li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
                    <a href="#" class="hvr-sweep-to-bottom"><i class="fa fa-address-book" aria hidden="true"></i><span>Contact</span></a>
                </li>
            </ul>
        </div>
    </div>

CSS:

.menuitem{
    height: 120px;
    text-align: center;
    }

.menuitem a{
        width: 100%;
        text-decoration: none;
        color: #ffffff;
        height: 120px;
    }

.menuitem a i{
    padding-top: 22px;
    display: block;
    color: #fafafa;
    font-size: 26px;
    }

    .ul-menu-color{
    background-color: #000;
    font-family: 'Creepster', cursive;
}

Answer 1

Если у кого-то возникла эта проблема, это произошло из-за class = "list-inline clearfix"

Я удалил и добавил отступы в UL, и навигационная панель теперь идеальна.

Answer 2

Это происходит потому, что вы вложили свою панель навигации в элемент div. И тогда вы определяете новый элемент div. Div - это элемент уровня блока, поэтому вы наблюдаете пустое пространство, которое является полем по умолчанию между двумя элементами уровня блока. Попробуйте заключить их в один родительский div или вы можете выполнить следующее,

Для div после navbar, используйте css as,

div{ margin-top: -10px; }

Я надеюсь, что это будет работать