@hassanmoaa
Posted
- set a max-width for the parent element
<header>
or you can remove the header tag and put the overlay in the<picture>
tag and also set a max-width on it so you dont have many parents for a specific element, that may fix the problem.
For the id's and classes:
-
You want to use classes over ids because ids are harder to maintain and can only be used once and also you don't have JS in here so prob you won't need id's as much.
-
And it's not about using them alot it's about to maintain your code readability for yourself/reviewer or your team if someone will take the project after you, so you should choose a meaningful name for them and use them when needed so the code is easy to read and maintain.
-
You can try and choose a CSS approach like BEM or OOCSS.
Other than that you did good, keep up the work!