无法让响应式文本输入保持在表单的边界内

Question

我是一名初级 Web 开发人员，正在尝试在我正在构建的简单网站中包含响应式文本输入。设置适当的宽度和最大宽度后，我注意到输入栏没有停留在其表单容器的边界内，因为页面变窄了。经过一番研究和排查，我确定问题是由输入栏的左右边距引起的。

通过正确的 box-sizing 设置和没有边距，响应的行为符合我的预期。我添加边距的那一刻，它开始超出范围。知道是什么原因造成的吗？我一直在努力寻找超出我的 box-sizing 设置的解决方案，非常感谢您的帮助。

        <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;
}

Answer 1

你可以试试这个：

#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>

Answer 2

尝试添加

边距：0 1em 1em 0;

在电子邮件 ID 中

还有添加

内边距：25px;

在输入栏Id