Bootstrap: whitespace on the right side of navbar brand? - html

Question

I'm using Bootstrap for my navigation bar, and somehow I keep getting whitespace on the right side of the logo image. My navigation code looks like this:
.navbar {
background-color: white;
opacity: 80%;
font-size: 0.8em;
}
.nav-link a {
color: black;
}
.nav-item img {
width: 110px;
margin-top: 8px;
margin-left: 10px;
margin-right: 20px;
}
.nav-item a {
color: black;
}
.navButtons {
background-color: white;
color: black;
padding: 6px;
font-size: 12px;
}
.navButtons:hover {
color: black;
text-decoration: none;
}
<style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</style>
<nav class="navbar fixed-top navbar-expand-sm navbar-light">
<a class="navbar-brand" href="index.html" style="margin:0;">
<img src="https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now" alt="logo" style="width: 50%;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="button navButtons" href="about.html"> Biography <span class="sr-only">(current)</span> </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="interiorDesigns.html"> Interior Design </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="arts.html"> Arts </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="blogs.html"> Blogs </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="contact.html"> Contact </a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<div class="form-group mb-4">
<input type="search" placeholder="Search" class="form-control form-control-underlined">
</div>
</form>
</div>
</nav>
And this is what my logo looks like, the yellow part is where I want to get rid of. I tried changing the padding, margin, and width, but none worked.:

Answer 1

In your Example the Anchor tag is is a block element/parent container of the image.
Apply width and padding-right(if required) to the navbar-brand.
Then instead of adding 50% width make it 100% to the img tag inside.
This will fix your issue.
Example Code (last two lines) in CSS then tag:
.navbar-brand {
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
width: 300px;
padding-right: 50px;
}
<img src="https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now" alt="logo" style="width: 100%;">