Chrome против Safari: тот же размер шрифта, но chrome намного больше

Question

Я делаю основную c контактную форму для своего личного сайта, и я не могу понять, почему форма намного больше с Chrome. Я пытался добавить сброс css, но не получилось.

Мой размер шрифта устанавливается только с px.

После проверки кажется, что у меня также возникает проблема размера шрифта в разных местах моего кода

html

<class id="contact">
    <div class="contact-form-general">
        <div class="form-container">
            <div class="contact-sections">
                <div class="contact-infos">
                    <h1>Contact Me</h1>
                    <div class='info-section'>
                        <h3>Contact Informations</h3>
                        <p>360 Huntington Ave</p>
                        <p>Boston, MA 02115</p>
                        <p>USA</p>
                    </div>
                    <div class='info-section'>
                        <h3>Follow Me </h3>
                        <a href="https://github.com/github">GitHub</a>
                        <a href="https://www.linkedin.com/in/#">LinkedIn</a>
                    </div>
                </div>
                <form onsubmit='return validateForm()' action="http://formspree.io/mail.com"
                    method="post " id="contact-form">
                    <div class="input-field">
                        <input class="user-input" type="text" name="name" autocomplete="off" required>
                        <label for="name" class="label">
                            <span id="pam" class="content">Name</span>
                        </label>
                    </div>
                    <div class="input-field">
                        <input class="user-input" type="text" name="email" autocomplete="off" required>
                        <label for="email" class="label">
                            <span class="content">Email</span>
                        </label>
                    </div>

                    <div class="input-field">
                        <textarea class="user-input" name="message" id="" cols="30" rows="10" required></textarea>
                        <label for="message" class="label">
                            <span class="content content-large">Message</span>
                        </label>
                    </div>
                    <div>
                        <input class="submit" type="submit" name='submit' value="Send">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

css

    *{
        list-style: none;
        margin:0;
        padding:0;
    }

    body{
    font-family: 'Nunito', Arial, Helvetica, sans-serif;

}

a{
    text-decoration: none;
}

.contact-infos h1{
    font-size: 48px;
    margin-bottom: 2rem;
}

.contact-infos .info-section{
    padding-bottom: 2rem;
    display: flex;
    flex-direction: column;
}


.contact-infos .info-section h3{
    text-transform: bold;
    margin-bottom: 8px;
    font-size: 20px;
}

.contact-infos .info-section a{
    font-size: 18px;
    margin-bottom: 5px;
    color: white;

}

.submit{
    background-color:  white;
    border: white solid 1px;
    border-radius: 20px;
    color:#be450d;
    font-family: 'Nunito', Arial, Helvetica, sans-serif;
    font-size: 16px;
    height: 40px;
    width: 150px;
}

.submit:hover{
    transition:  0.4s;
    background: #be450d;
    color:white;

}