How To Solve Resolution Problem In Website?

Hi everyone, i’m having a problem with my menu bar in my blog, it runs fine in a screen resolution of 1366x768, or 1980x1080, but it doesn’t look good in 1024x768 resolution, or any resolution have a width is less than 1024px, you can see the problem in the picture below:

When i run it in 1366x768 resolution, the menu bar is normal

in 1024x768 resolution, there is one problem, you can see that

Tool to test website in different screen resolution:
My site:

Can anyone help me fix this problem?
Thank in advance


You have added 15px padding to the side of the nav bar which makes it 30px bigger than the rest of the layout so it will stay wider when the viewport is closed smaller.

Remove the padding from here:

.tabs-inner {
    padding: 0 15px;

If you are using that class elsewhere you will have to compensate for its removal accordingly.

Well, This works excellent.
Thank thank thank you very much
Big thumbs up for you.
//This forum helped me a lot
//BTW, How to mark threads SOLVED?

//BTW, How to mark threads SOLVED?

You just did :slight_smile: