body 为 100% 时出现水平滚动

为什么如果将body width属性设置为100%，会出现水平滚动？

html:

    <div id="container">
        <header>
          <h1 id="title">freeCodeCamp Survey Form</h1>
          <p id="description">Thank you for taking the time to help us improve the platform</p>
        </header>
        
        <form action="" id="survey-form">
            <fieldset class="frst-field">
                <label id="name-label">Name<input type="text" id="name" placeholder="Enter your name" name="user_name" required></label>
                <label id="email-label">Email <input type="email" id="email" placeholder="Enter your Email" name="user_email" required></label>
                <label id="number-label">Age(optional) <input type="number" id="number" placeholder="Age" name="user_age"></label>
                <label>Which option best describes your current role?
                    <select name="role" id="dropdown">
                        <option value="">Select current role</option>
                        <option value="1">Student</option>
                        <option value="2">Full time job</option>
                    </select>
                </label>
            </fieldset>
        </form>
    </div>

CSS：

* {
    margin: 0;
    padding: 0;
}


body {
    /*width: 100%;*/
    font-family: Arial, serif;
    background: #93758e;
    color: #fff;
    border: 1px solid black;
}

#container {
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid black;
}