CODEWITHSUNDEEP
htmlcssremoving-whitespace
Neža Vižintin
Neža Vižintin

Reputation: 191

How do I get rid of the whitespace in my navbar?

I can't figure out where the whitespace (highlighted with yellow), right from the user icon, is coming from. I want the user button to only have a small margin on its right.

enter image description here

If I try to inspect it (see image bellow) it says it's part of the ul element but I can't find the issue.

enter image description here

I don't know what snippet to share because I'm not sure where the problem is but bellow is the CSS of the ul element, the entire CSS and the HTML where the ul element is.

The HTML:

https://github.com/NezaVizintin/Swapet/blob/master/Views/Shared/_Layout.cshtml

CSS specifically for the ul element:

nav > ul { /*all elements together on navbar*/
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
margin: unset; }

This entire CSS:

https://github.com/NezaVizintin/Swapet/blob/master/wwwroot/css/custom-swapet.css

Upvotes: 0

Views: 56

Answers (2)

Tushar saxena
Tushar saxena

Reputation: 327

Though Your question was not that clear but based upon my understanding I can give you these solutions.

In the second Image the green portion is the left-padding for the <ul> tag you can remove it by just setting the padding-right:0.

Talking about why there is the yellow marked space to the right of your user ? , it is because you have set the justify-content to start - which forces your <ui> element to strictly align towards the left of the container leaving that yellow space to the right.

A possible solution to this can be setting the justify-content to space-between-which will let all of the li to be equally spaced and also makes your user align to the right removing that yellow space and then you can add a little margin to the right if you want.

Proposed Changes to CSS

nav > ul {
display: flex;
flex-direction: row;
justify-content: space-between; /*proposed changes*/
align-items: center;
margin: unset;
padding:0;                      /*proposed changes*/
}

Upvotes: 1

Jeet
Jeet

Reputation: 795

Here, I don't know the exact problem but and padding: 0 will solve your problem.

nav > ul { /*all elements together on navbar*/
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    margin: unset;
    padding: 0;
}

Let me know if it does not works for you.

Upvotes: 1

Related Questions