Working on designing a menu, and I noticed that the 'Book Now' option is slightly misaligned (pushed down) after adding a border. This seems to disrupt the horizontal alignment. Is there a way to correct this issue?
Here is the HTML:
<div class="navibar">
<a class="logo" href="#">Logo</a>
<ul class="left-bar">
<li>
<a href="#">ACCOMMODATIONS</a>
</li>
<li>
<a href="#">DINING</a>
</li>
<li>
<a href="#">SPA & WELLNESS</a>
</li>
<li>
<a href="#">MEETINGS & EVENTS</a>
</li>
<li>
<a href="#">ADVENTURES</a>
</li>
</ul>
<ul class="right-bar">
<li>
<a class="btn btn-ghost" href="#">BOOK NOW</a>
</li>
</ul>
<div style="clear:both"></div>
</div>
And the CSS:
* {
list-style: none;
margin: 0px;
padding: 0px;
text-decoration: none;
}
.navibar {
margin: 0 auto;;
width: 1100px;
background: rgba(18, 23, 26, 0.4);
padding: 20px;
}
.navibar li a {
color: white;
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
}
.logo {
float:left;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-right: 100px;
}
.navibar li {
float: left;
}
.left-bar {
float: left;
}
.right-bar {
float: right;
}
.btn:link,
.btn:visited {
/*<a> is a inline element which doesn't allow padding, so need to change to inline-block */
/* 10 on top and bottom and 30 left and right */
font-weight: 300;
word-spacing: 3px;
font-family: brandon-grotesque;
text-decoration: none;
/*Takes away line on bottom of words */
transition: background-color 0.2s, border 0.2s, color 0.2s;
/* makes color subtly change instead of instantly. More applealing */
}
.btn-full:link, .btn-full:visited {
background-color: #fff;
/* From flat UI colors */
border: 1px solid #fff;
color: #fff;
margin-right: 10px;
}
.btn-ghost:link, .btn-ghost:visited {
border: 2px solid #fff;
color: #fff;
}
It seems like Borders don't affect padding or margin, but please correct me if I'm mistaken.
Just adding some filler text because apparently Stack Overflow wants more words. Is this enough?