Aligning of H1 and p to the left

HTML-CSS
1

Hello,

I have been styling basic h1 and p tags first is h1 beneath p and I see that h1 is not fully aligned to the left and there is some magic white space, web inspectors shows nothing, I have zero padding, margin and so on, but it still shows some extra spacing.

image

Please see that big letters are h1 with
among first and last name
then you can see orange div just and simple underline
then there is my position name within p tag.

All is within one div wannabe wrapper alligned to the one side and still it shows some ghost space and I do not know why.

I know that my description may miss something, if you need more I will share also markup and styling.

Thank you for any suggestion.

Best Regards
Petr

2

Would definitely need to see the HTML and CSS. Could you put it on codepen or some other such place?

3

Hi Chuck,

thanks for reply.
Please see attached codepen: https://codepen.io/pekahanek/full/abOYgoj

It is bit messy without the picture but the issue I talked about, is still there, please note that the second section (About Me) is fine from this point of view, all is lined up.

4

It’s the font: when I change the first letter of your last name to an “A”, the left leg of the A lines up perfectly. This is pretty normal for almost any font though, since letters would otherwise run together unless the renderer hinted every single letter. You might have to resort to something like a negative margin to push it left, or alternately padding on the underline. The negative margin would probably be more reliable, since if you do it in ems, it should work regardless of the scale.

5

Thanks Chuck, for your fast, response.

Will definitelly try tomorrow and keep you updated.

Thanks!