I was checking your files and found some weak-points I think it's crucial for your learning process to know. I going to classified them in three cathegories: CSS, HTML and Visual.
CSS:
Use of Element Selector and ID's Selector instead of classes: It's good to remember that each type of selector we use has a importance level to our browsers (specificity) and depending of what type of selector you use, maybe the properties you are trying to set out doesn't fit in as you expected due to the importance the selector represents to the browser. To avoid frustrations in the future, I highly recommend you the use of classes when you naming things in HTML. Using classes allows you to keep all your proyects in the same level of importance and avoid that your properties being blocked by a higher-importance selector. Keep ID's for Javascript!
Unnecessary use of width in the Body: In most of the cases, set an width is not needed to fill all the space of the body horizontaly. Most of the browsers makes these job for us!
Use of Viewport units: Be carefull when using viewport units. If you don't know how those units works, elements gets bigger than you expect and could overflow its container. I recommend you search more info about how those units works to avoid unexpected behavior.
HTML:
Level of semantic HTML: I don't have any deal with your semantic level you used in your HTML. But, to make and readable and understandable HTML for you and your colleauges, it's recomendable using semantic HTML from the start to the end.
Visual:
Be more focused in the design model: your view (desk mode) is not bad, but the boxes looks bigger than expected. making things smaller would fix the problem. The same advise to mobile mode.
Recommendations:
Use more semantic HTML.
Use classes.
Search a little bit about measure unit systems.
Practice your styling skills.
I know it's frustrating designing web pages, specially making CSS code. But, as many practice as you make, you'll get better. Never give up!
