如何讓輸入框保持在綠框中間？

github-頁面鏈接:https://tahsinttalha.github.io/fcc-survey-form/

我試著讓magin property將inout框居中。但是在小屏幕上，它不能正常工作。我能怎么做呢？

嘗試添加框大小:邊框框；輸入的CSS定義:

#input-info-section > input,
#dropdown,
textarea {
    width: 100%;
    height: 40px;
    margin: 10px auto;
    border: 2px solid #333333;
    border-radius: 5px;
    padding: 10px;
    background-color: #fff;
    color: #333;
    font-family: "Inter", sans-serif;
    /* add the following line: */
    box-sizing: border-box;
}

這樣，填充和邊框將與所有其他尺寸一起計算，而不會在元素居中后添加。

我建議在主容器中使用填充，這樣所有的div和block元素將占據100%的寬度。

只需要把寬度:100%的所有輸入。

我舉了一個基本的例子:

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

body {
  display: flex;
  justify-content: center;
}

.container {
  max-width: 500px;
  background: lime;
  border-radius: 10px;
  border: 2px solid black;
  padding: 1rem;
}

.title {
  text-align: center;
  margin-bottom: 1rem;
}

.description {
  margin-bottom: 2rem;
}

.form-input, select-input {
  width: 100%;
  outline: none;
  border: 2px solid black;
  border-radius: 5px;
  height: 40px;
  margin: 1rem 0 ;
  padding: 1rem;
}

.select-input {
  width: 100%;
  height: 40px;
  border: 2px solid black;
  border-radius: 10px;
  margin: 1rem 0;
}

<div class="container">
    <h1 class="title">
      Personal Survey
    </h1>
    <p class="description">
      This survey is being conducted solely for the purpose of the developement of the website. Your data is safe and secured and we will be disposed of the data after our   analysis is completed. Thank your very much for your time and effort.
    </p>
  <form action="#">
    <label for="" class="form-label">
      Name
    </label>
    <input type="text" class="form-input" placeholder="Type your name">
        <label for="" class="form-label">
      Name
    </label>
    <input type="text" class="form-input" placeholder="Type your email">
        <label for="" class="form-label">
      Name
    </label>
    <input type="text" class="form-input" placeholder="Type your age">
    <div class="select-container">
      <select class="select-input" name="" id="dropdown">        
        <option value="Select">Select your profession type</option>
        <option value="">option 1</option>
        <option value="">option 2</option>
        <option value="">option 3</option>
        <option value="">option 4</option>
      </select>
    </div>
  </form>
</div>

您可以使用flex將元素保持在box.like中間:

<div class="box">
  <input />
</div>

向div添加CSS

.box {
  display: flex;
  flex-direction: row;
  justify-content: center;
}