Why is there a huge clickable gap in between my logo and my navigation bar and how to get rid of it?

Question

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
}

.nav-links,
.logo {
  text-decoration: none;
  color: #000;
}

.logo {
  max-width: 80%;
  width: 20%;
  height: 20%;
}

.navbar img {
width: 10%;
height: auto;
display: in-line block;
}

.navbar {
  padding: 20px;
  height: 50vh;
}

.navbar,
ul {
  display: flex;
  flex-direction: row;
}

ul li {
  padding: 0 5px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

Above is my code, as you can see there's a huge gap in between my image and the above highlighted below:

It also seems like the white space in between it is clickable. I want to get rid of it so it looks like this instead (keeping the spacing in between about us and contact us but removing the spacing between the image and Home):

I tried getting rid of all padding and changing my logo to inside my unorder list, but that didn't do anything.

user_13187326 · Answer

For best results, set image size by height, ex:

img {
   height: 30px;
   width: auto;
}

See the working fiddle https://jsfiddle.net/8hdt4rfu/1/

user_13358440 · Answer

Try changing the width of the Image to a set amount of pixels and not a percent like so:

.navbar img {
width: 50px;
}

user_13303830 · Answer

It looks to me like you are trying to target a class by the name of logo in your CSS file, but when I look at your HTML, I don't see a class='logo'.

user_13358440 · Answer

In response to his request in the comments, here is the final code snippet:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
}

.nav-links,
.logo {
  text-decoration: none;
  color: #000;
}

.logo {
  max-width: 80%;
  width: 20%;
  height: 20%;
}

.navbar img {
width: 10%;
height: auto;
display: in-line block;
}

.navbar {
  padding: 20px;
  height: 50vh;
}

.navbar,
ul {
  display: flex;
  flex-direction: row;
}

ul li {
  padding: 0 5px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.nav-logo{
  text-decoration: none;
  color: #000;
  padding-left: 10px;
}

user_11135216 · Answer

You try to make the image 10% inside tag, it means that the difference between tag and tag must be 90%, that's how I understand that. So you can solve your issue just by changing % to pixels, or change percentage on and tags.

.navbar img {
  width: 100%;
  height: auto;
  display: in-line block;
}

.navbar a {
  width: 10%;
}

But as i can see you mixed up everything in your html/css, you can achieve the same result by this way:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.leftbar, .rightbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 40%;
}

.rightbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 16%;
}

.navbar img {
  width: 100%
}

.navbar a {
  width: 20%;
}

.nav-links {
  text-align: center;
}


  
    
    Home
    Products
    About Us
  
  
    Contact Us
    Blog

Why is there a huge clickable gap in between my logo and my navigation bar and how to get rid of it?

5 Answers