Problem at the top of my page

Hello all! I need help to find the mistake that makes my page look bad at the top. I can’t find the problem that makes the nav have an empty grey part under it when I use Mozila’s Responsive viewer.

It’s like the header or the nav is too high, or that it has a huge margin or padding or something. Sorry if I say something nonsense. I’m new at this :slight_smile:

The link to the Documentation Page is:

hi federicoarchilla,

In #navbar I added height: auto;
and in #navbar ul I added margin-bottom: 0px;

it works for me. Let me know if this solve your problem.

1 Like

Welcome to the community!

It shouldn’t necessarily be within the scope of the projects for submission, but if you want to consider making webpages responsive for mobile devices, you’ll want to look more into media queries. This page here has a good list of them.

Removing the “height: 100%” on the style did help with the mobile view, but not the desktop view. However, I think your problem starts with that “height: 100%” in the #navbar css. You may have to look for tricks that allow you to fill the space with the background color without necessarily extending the navbar div itself. It’s tricky. Good luck!


tnx for help, I faced with similar issue recently

1 Like

Hello Darren! Thank you for your answer. Yes, I know I need to look more into media queries. i have recently started learning about web design and that’s my next step. Thanks for the link to the list and thanks for your help.

Buenos días Mauricio! Si solucionó mi problema! Muchas gracias!