Появляется горизонтальный скролл при body в 100%

Question

Почему если поставить свойству 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;
}

Answer 1

Из-за border: 1px solid black; появляется скролл в body. Уберите и все будет окей

Answer 2

Лучшим вариантом будет добавление свойства box-sizing: border-box; либо для всех элементов, либо для body, #container

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; //Добавляем для того, чтобы рамка в 1px у body, #container входила в размер ширины данного блока
}

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

<body>
  <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>
</body>

P.S. Либо же, как было сказано выше, убрать рамку border: 1px solid black; (но, по понятным причинам, это не выход)

БЛОГ НА HUSL

Появляется горизонтальный скролл при body в 100%

Ответы (2 шт):