Unwanted margin between 2 menu items header website (on some pages)

Question

I am updating my website

-- WEBSITE --

A web developer made it years an ago.

Now I put an SSL Encryption on the website. But after that change, it seems there is an unwanted margin in the header on some pages.

I can't seem to find out where it's coming from. [Image: unwanted margin between header menu items][1]

My screen resolution is: 1920 x 1080

Anybody knows how to solve this?

I tried already to use different widths for the menu items and margins. But I think I am doing something wrong..

Answer 1

Thank you all for responding.

I found the solution in siva - abc's answer.

I added 'background-size: cover' to the list items in the CSS classes and now the problem is solved!

Thanks all!

Answer 2

This is what I'm seeing when I click the link:

I think it possibly has something to do with just your screen resolution, but I'm not an expert. I know I've had plenty of experiences were if I scroll too fast or I resize the viewport, I get black lines in between items that flicker and then disappear, so it could be something like that.