CODEWITHSUNDEEP
htmltwitter-bootstrap
Sarah
Sarah

Reputation: 617

Bootstrap: whitespace on the right side of navbar brand?

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.: enter image description here

Upvotes: 0

Views: 576

Answers (1)

Karthik
Karthik

Reputation: 111

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%;">

Upvotes: 1

Related Questions