调整浏览器大小时CSS重叠文本

Question

我正在尝试复制(就像 CSS 中的练习一样)this website .在全尺寸浏览器中它看起来不错(我的 overall result )，但在调整大小时我遇到两个问题:

1) 菜单与名称“Pico”重叠(如 here 和 here )。

2) 其中一个 div 没有填满浏览器的所有宽度 ( here )。

我试过播放 width: 100% 和 overflow 值，但无法找出问题所在。

这是 jsfiddle 上的代码.

Answer 1

1. 因为 .menu 类有 position: absolute 并且看不到“Pico”文本。
2. 从 .header 中删除 min-width 并将 flex-wrap: wrap 添加到 .level。