Why does not max-width?

0 like 0 dislike
32 views
Hello! Please help me to understand why does not work property max-width: 1650px; for a block with class "header-wrapper".

I wrote max-width: 82.1% and it worked. The page now looks the way I would need:

5be827345eac8890531479.jpeg

However, when you shrink the page, then the green block header-wrapper somehow "falls" menu:

5be827a4e716b497954995.jpeg

Somewhere I screwed up. But I do not understand where.

Code HTML:

<!DOCTYPE html>Merkury Landing Page


Code CSS:

*{ padding: 0; margin: 0; } .clearfix:after { clear: both; content: "; display: table; } html{ background: #03050b; } header{ background: red; } .header-wrapper{ background: green; max-width: 1650px; margin: 0 auto; display: flex; } .header-wrapper img{ width: 238px; } .menu{ display: flex; list-style: none; } .menu li{ padding-left: 50px; }
asked by | 32 views

1 Answer

0 like 0 dislike
The property flex-wrap flex said container to move the item to a new position if it doesn't fit or not. By default, elements are not transferred.
The picture is set to fixed width. Either change the media queries to the width to each device, or to make rubber.
Why do you need clearfix, if you use flex?
answered by

Related questions

0 like 0 dislike
1 answer
asked Nov 23, 2018 by Programmir
0 like 0 dislike
1 answer
24,509 questions
45,932 answers
0 comments
345 users