Почему input и textarea вплотную прилегают к правому краю формы?

Question

Почему input и textarea вплотную прилегают к правому краю формы и выходят за края грид-сетки?

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.wrapper {
    max-width: 1200px;
    width:  100%;
    padding: 0 60px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

form {
    display:  grid;
    grid-gap: 0 60px;
    grid-template: repeat(3,1fr)/repeat(2,1fr);
    align-items: flex-end;
    box-sizing: border-box;
    outline: 1px solid #000;
    padding:  30px;
}


input, textarea, button {
    padding:  10px 15px;
    border: none;
    background: slateblue;
    opacity: .5;
    color: #fff;
    font-size: 17px;
    outline: none;
    resize: none;
    display: block;
    width: 100%;
}

label {
    display: block;
}



button {
    margin-right: 150px;
    cursor: pointer;
}

.box-name {
    grid-column: 1/2;
    grid-row: 1/2;
}

.box-email {
    grid-column: 2/2;
    grid-row: 1/2;
}

.box-textera {
    grid-column: 1/3;
    grid-row: 2/3;
}

.box-submit {
    grid-column: 1/3;
    grid-row: 3/3;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <form class="form" action="#">
            <div class="box-form box-name">
                <label for="name" class="box-form__label">Ваше имя</label>
                <input type="text" class="box-form__input" id="name">
            </div>
            <div class="box-form box-email">
                <label for="email" class="box-form__label">Ваш Email</label>
                <input type="text" class="box-form__input" id="email">
            </div>
            <div class="box-form box-textera">
                <label for="question" class="box-form__label">Ваш вопрос</label>
                <textarea name="" id="question" class="box__form-textarea"></textarea>
            </div>
            <div class="box-form box-submit">
                <button class="btn-accent" type="submit">Отправить</button>
            </div>

        </form>
    </div>
</body>
</html>

Answer 1

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.wrapper {
  max-width: 1200px;
  width: 100%;
  padding: 0 60px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

form {
  display: grid;
  grid-gap: 0 60px;
  grid-template: repeat(3, 1fr)/repeat(2, 1fr);
  align-items: flex-end;
  box-sizing: border-box;
  outline: 1px solid #000;
  padding: 30px;
}

input,
textarea,
button {
  padding: 10px 15px;
  border: none;
  background: slateblue;
  opacity: .5;
  color: #fff;
  font-size: 17px;
  outline: none;
  resize: none;
  display: block;
  width: 100%;
}

label {
  display: block;
}

button {
  margin-right: 150px;
  cursor: pointer;
}

.box-name {
  grid-column: 1/2;
  grid-row: 1/2;
}

.box-email {
  grid-column: 2/2;
  grid-row: 1/2;
}

.box-textera {
  grid-column: 1/3;
  grid-row: 2/3;
}

.box-submit {
  grid-column: 1/3;
  grid-row: 3/3;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="wrapper">
    <form class="form" action="#">
      <div class="box-form box-name">
        <label for="name" class="box-form__label">Ваше имя</label>
        <input type="text" class="box-form__input" id="name">
      </div>
      <div class="box-form box-email">
        <label for="email" class="box-form__label">Ваш Email</label>
        <input type="text" class="box-form__input" id="email">
      </div>
      <div class="box-form box-textera">
        <label for="question" class="box-form__label">Ваш вопрос</label>
        <textarea name="" id="question" class="box__form-textarea"></textarea>
      </div>
      <div class="box-form box-submit">
        <button class="btn-accent" type="submit">Отправить</button>
      </div>

    </form>
  </div>
</body>

</html>

БЛОГ НА HUSL

Почему input и textarea вплотную прилегают к правому краю формы?

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