Блог

Я впервые использую Bootstrap и я относительно новичок в HTML / CSS. Когда я вставил логотип в панель навигации, перед первым элементом в моем списке навигации «Home» появляется пробел, от которого я не могу понять, как избавиться. Это пространство исчезает, когда я удаляю логотип, так что это как-то связано. Аналогичные проблемы переносятся в выпадающее меню, где «ГЛАВНАЯ СТРАНИЦА» имеет отступ, а остальная часть навигации — нет. Есть идеи, что я делаю не так?

Вот HTML

 <div class = "navbar navbar-default navbar-static-top">
    <div class ="container">

        <button class = "navbar-toggle" data-toggle ="collapse" data-target = ".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href ="#" ><img src="images/PermitMeLogoHorz.png"</a>

        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Wireless Communications <b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                <li><a href="#">Site Acquisition</a></li>
                <li><a href="#">Land Use Consulting</a></li>
                <li><a href="#">Permit Expediting</a></li>
                <li><a href="#">Project Management</a></li>
            </ul>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

      </div>    
</div>
 

И вот CSS

 .navbar-brand > img{
width:100%;
margin-top:5px;
 

}

 .navbar-nav li a {
color: #CCC000;
font-size:17px;
font-weight:400;
padding-top:25px;       
 

}

 .navbar .nav .active > a, .navbar .nav .active > a:hover {
background-color: #fff;
color:black;
height:60px;
}

.navbar .nav > li > a:hover {
color: #b20000;
 

}

 .dropdown  ul li a{
color:black;
 

}

 .dropdown li a:hover{
background-color:gray ;
color:white;
 

}

 .caret{
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 8px solid #b20000;
margin-top:-2px;
 

}