Elements overlapping inside a CSS flexbox

Elements overlapping inside a CSS flexbox


I am currently building a technical documentation page and am thinking of position the element and the element side by site in a flexbox. On the other hand, if the viewport is 750 pixels wide or less, I want the to appear above . Yet, when seen on the Codepen dashboard, the and the don’t quite behave as I expect. In editor view, (very) slightly overlaps , and on the dashboard the two elements split the viewport 50-50 between them. What am I doing wrong here? Do and behave differently inside a flexbox than ordinary


The link to my page (still very much under construction) is below. Ignore the background colors, they’re there to help me see the HTML elements and won’t be there in the final verson.


Since you are using flex to organize your content, it’s unnecessary to give your <main> element a margin-left of 200px. Also, giving your <nav> element a position of fixed is totally negating your flex positioning. Remove those two styles form your css and flex will be able to do its job.