Flex items’ margins won’t collapse. When flex items wrap, they create their own row, and the individual margins on the flex items won’t collapse between rows. Only normal, adjacent block elements stacked will margin collapse the way you’re intending. This is a good reference – https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing You can create the same layout by removing the top margin from the li’s and making that a padding-top on the ul instead, then only the bottom

Source: css – Why are margins not collapsing? – Stack Overflow