When I change the font size, it changes the margin/padding-CodePudding

I am currently coding a front page for my website. I'd like all the text to be inline with each other, but when I increase the font size of one, it adds a padding or margin around it, moving it a little to the right and pushing the text below it down.

Is there any way to solve this?

@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: Roboto-Black;
    src: url(/fonts/Roboto-Black.ttf);
}
:root {
    --black: Roboto-Black 
}



/* INDEX PAGE */
body,html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.index-bg {
    background-image: url(/images/joshua-sortino-71vAb1FXB6g-unsplash.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    z-index: 1;
}

.main-fcs {
    position: absolute;
    top: 30%;
    left: 10%;
    transform: translate(-10%, -30%);
    font-size: 30px;
}

.main-fcs h1 {
    font-family: var(--black);
}

<!DOCTYPE html>
<html lang="en" style="max-width: 100%; overflow-x: hidden;">
<head>
    <title>website</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta data-hid="description" name="description" content="website">
</head>
    <body>
        <div ></div>
        <div >
            <h1>Custom Websites</h1>
            <p>Your fully custom website awaits...</p>
        </div>
        <div >
            <div >
                <h2>Get Started</h2>
            </div>
        </div>
    </body>
</html>

CodePudding user response：

I think I have the solution, I simply removed the body {} selector and gave the h2 selector properties that determine its position, if you resize the page it will be in the same place. I gave h2 similar properties that was given to the other class.

@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: Roboto-Black;
    src: url(/fonts/Roboto-Black.ttf);
}
:root {
    --black: Roboto-Black 
}



/* INDEX PAGE */
html {
    height: 100%;
    margin: 0;
    padding: 0;
  
}

.index-bg {
    background-image: url(/images/joshua-sortino-71vAb1FXB6g-unsplash.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    z-index: 1;
}

.main-fcs{
    position: absolute;
    top: 30%;
    left: 10%;
    transform: translate(-10%, -30%);
    font-size: 30px;
    
}
h2 {
position: absolute;
   top: 50%;
    left: 10%;
    transform: translate(-10%, -30%);
   
}

.main-fcs h1 {
    font-family: var(--black);
}

<!DOCTYPE html>
<html lang="en" style="max-width: 100%; overflow-x: hidden;">
<head>
    <title>website</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta data-hid="description" name="description" content="website">
</head>
    <body>
        <div ></div>
        <div >
            <h1>Custom Websites</h1>
            <p>Your fully custom website awaits...</p>
        </div>
        <div >
            <div >
                <h2>Get Started</h2>
            </div>
        </div>
    </body>
</html>