Unable to fit text-label in form container (survey project)

Tell us what’s happening:
It seems that the text-label overlaps the form box and I can’t seem to get it perfectly centered within the form box.

Your code so far

<!DOCTYPE html>

        <title>OS survey</title>
        <link rel="stylesheet" href="surveystyle.css">
    <div id="script">
        <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <div class="title-section">
        <h1 id="title">macOS vs. Windows</h1>
        <p id="description">Thank you for helping us decide which platform to focus on</p>
    <div id="surveyform">
        <form id="form">
            <input type="text" placeholder="Enter your name here">


@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');


    font-family: 'Roboto', sans-serif;


.title-section {

    text-align: center;



    margin-top: 2em;



    margin-bottom: 2em;


@media (min-width: 749px) {


        max-width: 750px;




    background-color: turquoise;

    border-radius: 5px;



    width: 100%;


Your browser information:

Microsoft Edge version 87.0.664.47

Challenge: Build a Survey Form

Link to the challenge:

Here’s the html file that’s preview-able in codepen.io

Test (codepen.io)

Hi @cloud1!

Welcome to the forum!

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).