I can not figure out which element in my navbar has unwanted margin/padding

user_10744338 0
Viewed 144

I want the border indicated by the arrow to go from the top to the bottom of the navbar and I can't figure out where the padding/margin is that is preventing it from doing so.

I have tried to set both padding and margin to 0px on all the elements bellow but besides getting rid of p/m I set, the line still would not go all the way.

What am I missing, please help!

navbar

Here's my code:

nav { /*navbar*/
    border-bottom: 2px solid rgba(121, 85, 72, 0.7);
    border-top: 2px solid rgba(121, 85, 72, 0.7);
    width: 90%;
    margin: 10px auto 30px auto;
}

nav > ul {  /*all elements together on navbar*/
    width: 90%;
    text-align: center;
}

nav > ul > li { /*all individual elements on navbar*/
    display: inline-block;
    padding: 10px 15px 0px 15px;
}

nav > ul > li > .logo {  /*logo on navbar*/
    margin-right: 100px;
    font-size: 30px;
}

nav > ul > li > a > i { /*icons on navbar*/
    margin-right: 5px;
}

nav > ul > li > a > .button-user { /*user button on navbar*/
    margin-left: 100px;
    font-size: 35px;
    vertical-align: middle;
    color: rgba(121, 85, 72, 0.9);
}

.logo { /*logo*/
    color: #FF7F50;
}

.text-navbar {
    color: rgba(121, 85, 72, 0.9);
    font-size: 17px;
}
    <header>
        <nav>
            
            <ul>
                <li><a asp-controller="Home" asp-action="Index" class="logo">Swapet</a></li>
                <li class="border-right"><a asp-controller="Home" asp-action="Index" class="text-navbar"><i class="fas fa-question-circle text-navbar"></i>Kako deluje?</a></li>
                <li><a asp-controller="Home" asp-action="Index" class="text-navbar"><i class="fas fa-cat"></i>Muce</a></li>
                <li><a asp-controller="Home" asp-action="Index" class="text-navbar"><i class="fas fa-dog"></i>Kužki</a></li>
                <li><a asp-controller="Home" asp-action="Index"><i class="fas fa-user-circle button-user"></i></a></li>
            </ul>

        </nav>
    </header>

bootstrap-4 css html
1 Answers

I did it! I figured out the problem. I disabled botstrap's CSS and the issue was gone but I wanted to still use Bootsrap. So I went looking if Visual Studio gives and other useful suggestions with "padding:" or "margin:" and found unset. Turns out had a bottom margin set and it couldn't be overwritten by seeting a new margin in my CSS but unset worked. Still no idea why.

Tl;dr:

nav > ul { /*all elements together on navbar*/
    width: 90%;
    text-align: center;
    margin: unset; <-- this
}
user_107443380
Related