I'm currently in the process of designing a Menu bar for my website, featuring a left side logo image and right side menu items. The logo is contained within an anchor tag to allow for a clickable feature that redirects to index.html (the home page).
However, I've encountered an issue where the anchor tag is adding extra space after the image, causing two problems: 1) the hyperlink area extends too far to the right of the logo image and 2) the last menu item gets pushed onto the second line.
I've attempted various solutions, such as removing spaces between a>img>/a> or using style="display: block;", but the problem persists. How can I properly align the menu items and eliminate the excess hyperlink area to the right of the logo image?
.header_top {
width: auto;
max-width: 72em;
float: none;
display: block;
margin-right: auto;
margin-left: auto;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
}
.navbar {
position: relative;
display: flex;
}
.navbar-toggleable-md {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: nowrap;
-webkit-box-align: center;
align-items: center;
margin-top: .1rem;
margin-bottom: .1rem;
}
.bg-faded {
background-color: #fff;
/* padding: 1.1em 1em; */
padding: 21px 0px;
}
.navbar-brand {
display: inline-block;
float: left;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-nav {
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding-left: 0;
flex-direction: row;
margin-bottom: 0;
list-style: none;
}
.mx-auto {
margin-right: auto !important;
margin-left: auto !important;
}
li.nav-item.active {
border-bottom: 3px solid #C19506;
background: #F5F5F5;
}
ul.navbar-nav li {
margin: 0 6px;
}
.navbar-toggleable-md .navbar-nav .nav-link {
padding-right: 1.1em;
padding-left: 1.1em;
letter-spacing: 1px;
}
.nav-link {
display: block;
padding: 0.5em 1em;
}
.navbar-toggleable-md .navbar-nav .nav-link {
padding-right: 1.1em;
padding-left: 1.1em;
letter-spacing: 1px;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<header>
<div class="header_top" id="home">
<nav class="navbar navbar-toggleable-md bg-faded">
<a class="navbar-brand" href="index.html">
<img width="37%" height="37%" src="images/Logo.png"></a>
<ul class="navbar-nav mx-auto">
<li><a class="nav-link" href="index.html">Home</a></li>
<li><a class="nav-link" href="about.html">About</a></li>
<li><a class="nav-link" href="about.html">Contact</a></li>
<li><a class="nav-link" href="index.html">Home</a></li>
<li><a class="nav-link" href="about.html">About</a></li>
<li><a class="nav-link" href="about.html">Contact</a></li>
<li><a class="nav-link" href="index.html">Home</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>Please use a 1285px x 249px image for the logo, which you can download from here as I am currently unable to upload images. One issue you may notice is that the Anchor tag takes up more width than the logo image between the logo and the first menu item 'Home'. If possible, is there a different way to add a link with the