Media query - landing page

Good morning! I have a problem with my landing page. I managed to get a page whichs fits into my laptop’s screen but when I open it using my mobile phone, some parts mix with each other. It didn’t happen to me before. To be honest, I copied the media query’s parts because I’m learning how it works but there are some things I don’t understand yet.

My landing page

Hope you can help me.

Thanks in advance!

I’m going to guess it’s the nav bar and the first contents that don’t fit, I tried this on the Responsive Layout on Google Chrome and here’s what I recommend:

The logo it’s occupying some important space in your nav bar, and somehow defining the size of it, I don’t know if that’s how you wanted it but I highly recommend reducing its size and removing the margin-top of it.

I do strongly believe the main problem here is the wrong use of flex, some padding between the "li"s would solve the spacing problem but still, I highly recommend starting the nav design again.

Also, check how media queries work, you’ve got many with the same resolution, it’s not a problem now but in the future if you’re planning to optimize your code it would work wonders.

And lastly, the “Contáctenos” button, after a certain resolution you are not able to see the last S, some padding would solve that quickly

Thank you very much for your help. I’m going to work on the things you tell me.
Your are right about the logo’s size. I decided to make it big so that it’s clear because I used a bad quality picture. I will design the nav bar again.

As regards the use of flex, well… i don’t really know how to work on it clearly. I will make my best to improve it. I will have you advice in mind.

Of course I will check the “Contáctenos” button.

Thanks a lot for your help!