Padding is not functioning properly, changes made in percents, ems and pixels

Question

I am trying to add padding around link in a vertical navigation menu I am making for a bakery site.

However when I make changes either the page becomes all out of whack, there is no changes at all, the whole menu moves or the padding disturbs the hover sequence and certain links are not highlighted when hovering over them.

I tried making changes in %, em's and pixels, but I get nothing still.

Iam using chrome and sublime text btw, if that helps.

Here is the HTML:

<!-- NAVIGATION LINKS-->
<div id = "navibar">
    <nav>

        <a class = "navibar" href = "aboutthebakery.html"> ABOUT THE BAKERY </a>
</br>
        <a class = "navibar" href = "bakeryselection.html"> BAKERY SELECTIONS </a>
</br>
        <a class = "navibar" href = "viewthemenu.html">VIEW THE MENU </a>
</br>
        <a class = "navibar" href = "visitalocation.html"> VISIT A LOCATION </a>
</br>
        <a class = "navibar" href = "http://example.com/--.html"> WEDDINGS & OCCASIONS </a>

</br>
        <a class = "navibar" href = "http://example.com/--.html"> CATERING 
        </a>
    </nav>
</div>

Here is the CSS (I changed everything to 0% just now):

/* NAVIGATION DIV CONTAINING LINKS */
#navibar {
    text-align: center;

    margin-top: 3%;
    margin-right: 48%;
    margin-bottom: 0%;
    margin-left: 8%;

}

.navibar {
    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;

    padding-top: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;

    color: #000000;

    text-decoration: none;

    font-size: 12px;
    font-family: Verdana; 
}

.navibar:hover {
    color: #c92727;

    text-decoration: none;

    font-size: 12px;
    font-family: Verdana; 
}

Answer 1

You need to get rid of the <br>'s and make the links block-level elements. Inline-block elements can have padding, however it's the combination of inline-block and <br> that's causing your issue. <br> doesn't respect margin/padding very well. Try using

.navibar {
    display: block;
    padding: 10px 0;
}