White space between rows when using flex: wrap

Am trying to make a navbar, but when I use flex: wrap and the navbar shrinks, there is a lot off space between the first row and the second row (see image). Here you is my html and css https://codepen.io/lccua/pen/OJKXRPZ
lccua
CodePen
Untitled
...
No description
2 Replies
Chris Bolson
Chris Bolson3mo ago
That is due to the gap in the parent item. “gap”, in its short form, is both for columns and rows. If you want diffrerent spacing between rows and columns you can define 2 values, the first value being the row and the second the column. :
gap: 10px 20px;
gap: 10px 20px;
Alternatively you can define them separately with:
row-gap: 10px;
column-gap: 20px;
row-gap: 10px;
column-gap: 20px;
luca
lucaOP3mo ago
@Chris thank you!! I needed to remove the height: 100% to
Want results from more Discord servers?
Add your server