I’m a beginner Web Developer who is trying to include a responsive text input in the simple website I am building. After setting the appropriate width and max-width, I noticed the input bar was not staying within the boundaries of its form container as the page got narrower. After some research and troubleshooting, I determined that the issue is being caused by the input bar’s left and right margins.

With the proper box-sizing setting and no margins, the responsiveness behaves as I’d expect. The moment I add the margins, it starts to go out of bounds. Any idea what could be causing this? I've been struggling to find a solution beyond my box-sizing settings and really appreciate the help.

        <section id="newsletter">
            <h2>Join our newsletter</h2>
            <form action="" id="inputBar">
                <input type="text" name="email" id="email" value="Enter E-mail Address">
                <input type="button" value="Submit" class="btn">
            </form>
        </section>

#inputBar {
    border: 1px solid black;
}

.btn {
    color: white;
    font-size: 24px;
    font-weight: 100;
    background-color: #1C3F74;
    border-radius: 43.5px;
    width: 220px;
    padding: 20px 15px;
    border: none;
}

#email {
    box-sizing: border-box;
    font-weight: lighter;
    font-size: 26px;
    background-color: #E5E5E5;
    border-radius: 43.5px;
    width: 100%;
    max-width: 680px;
    padding: 20px 35px;
    border: none;
    margin: 1em;
}

CodePudding user response：

You can try this :

#inputBar 
        {
                 border: 1px solid black;
                 padding:15px;
        }

        .btn {
            color: white;
            font-size: 24px;
            font-weight: 100;
            background-color: #1C3F74;
            border-radius: 43.5px;
            width: 220px;
            padding: 20px 15px;
            border: none;
        }

        #email {
            box-sizing: border-box;
            font-weight: lighter;
            font-size:26px;
            background-color: #E5E5E5;
            border-radius: 43.5px;
            width: 100%;
            max-width:680px;
            padding:20px 35px;
            border:none;
            margin:0 1em 1em 0;
        }

<section id="newsletter">
            <h2>Join our newsletter</h2>
            <form action="" id="inputBar">
                <input type="text" name="email" id="email" value="Enter E-mail Address">
                <input type="button" value="Submit" class="btn">
            </form>
        </section>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

try adding

margin: 0 1em 1em 0;

in the email Id

and also add

padding:25px;

in the inputbar Id