Margin on H1 element

Question

So I have a margin on my H1 element that I want to remove.

I have tried adding

h1 {
margin 0;
}

But cannot seem to remove this. I have tried all sorts of things to resolve this but just end up messing up the media Queries when I put them in. I have remove these for now in order to try and fix the issue.

Website is blupace

The issue is between the Title BLUPACE and PHOTOGRAPHY.

Thanks everyone...

Answer 1

Its not the issue of the margin the gap is due to line-height you have used vw for font-size so you better go with:

#photo h1 {
    font-family: 'CODE-Light';
    font-size: 7.1vw;
    line-height: 4vw;
} 

About line-height : The line-height CSS property sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

This will work fine for you, if there is anything else please do ask.

Answer 2

THIS IS NOT AN ANSWER TO YOUR QUESTION BUT I was just looking at your website and I'd recommend you to add

cursor: pointer;

to your navigation links.

<a id="btn-fashion" class="btn-lb" onclick="FWDRL.show('rlobj_fashion', 
0);">FASHION</a>

It's just so your users know that this is a clickable link.

Another thing I'd recommend is putting your X icon (which appears when you open your navigation) on the same place where you've put your hamburger icon.

Answer 3

There is no margin on h1. Use line-height to reduce the distance:

#blupace h1 {
    font-family: "Code-Bold";
    font-size: 12vw;
    line-height: 92px;
}

Answer 4

.right have padding-top: 30px; ,So

for fix change like:

.right {
    padding-top: 0;
}