Search code examples
cssoverflowoverlapping

CSS overlapping text when resizing browser

I'm trying to copy (just as exercise in CSS) this website. In full size browser it looks fine (my overall result), but when resizing I get two problems:

1) Menu is overlapping with the name "Pico" (like here and here).

2) One of the div doesn't fill the browser in all its width (here).

I've tried to play width: 100% and overflow values, but couldn't figure out the problem.

Here's the code on jsfiddle.

Solution
    1. Because .menu class has position: absolute and don't see 'Pico' text.
    2. Remove min-width from .header and add flex-wrap: wrap to .level.