div firstRow和secondRow沒有與其他輸入對齊。 我不知道該怎么解決。

代碼如下:

header {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 50px;
}

.container {
  width: 550px;
  height: 700px;
  margin: auto;
  text-align: center;
}

form:not(#check) {
  padding: 50px;
  margin: auto;
  border: 1px solid rgb(243, 240, 240);
  border-radius: 20px;
  text-align: center;
  background-color: rgba(225, 208, 199, 0.804);
}

.other input {
  display: block;
  width: 100%;
}

.other input:not(#check) {
  margin-bottom: 10px;
  height: 50px;
}

.firstRow,
.secondRow {
  display: flex;
}

.firstRow input,
.secondRow input {
  margin-bottom: 10px;
  height: 50px;
  flex: 1;
}

button {
  width: 100%;
  height: 50px;
  background-color: rgb(97, 69, 53);
  border-radius: 20px;
}

.box {
  display: flex;
  margin: auto;
}

#check {
  float: left;
}

<header>
  <img src="" alt="logo">
  <p style="color: rgb(6, 6, 6); font-weight: bold; font-size: 40px">Welcome to <span style="color:rgb(97, 69, 53);">BUDGE IT! </span></p>
  <p style="font-size: 30px; font-weight: bold;">SIGN UP to join us </p>
</header>
<div class="container">
  <form action="" method="post">
    <div class="firstRow">
      <input type="text" name="nom" placeholder="First Name">
      <input type="text" name="prenom" placeholder="Last Name" style="float:right;">
    </div>
    <div class="secondRow">
      <input type="tel" name="tel" placeholder="Telephone" style="width:47%;">
      <input type="text" list="choice" placeholder="Gender">
      <datalist id="choice">
                    <option value="Male"></option>
                    <option value="Female"></option>
                </datalist>
    </div>

    <div class="other">
      <input type="email" name="email" placeholder="Email">
      <input type="password" name="pass" placeholder="Password">
      <input type="password" name="passw" placeholder="Confirm password">
    </div>
    <div class="box">
      <input type="checkbox" name="check" value="1" id="check">
      <p style="color:rgb(97, 69, 53); font-size:17px; font-weight: bold;">I accept the Terms of Use & Privacy Policy
      </p>
    </div>
    <p><button type="submit" name="but"><span style="color:white; font-size: 20px; font-weight: bold;">Sign
                        Up</span></button></p>
    <br>
    <hr style="font-weight: bold;">
    <p style="font-weight: bold; color: rgb(97, 69, 53); text-decoration: none; font-size: 20px; ">Already have an account? </p>
    <button style="border-color:rgb(97, 69, 53);background-color: white;"><span
                    style="color:rgb(97, 69, 53); font-size: 20px; font-weight: bold;">Log in</span></button>
  </form>
</div>

<footer style="height: 40px;">
  <p style="border: 1px solid rgb(245, 241, 241) ; background-color: rgb(245, 241, 241); height: 40px; text-align: right;">
    Copyright @EHTP/1GI-2023</p>
</footer>

改變。其他輸入寬度為98%。

.other input {
      display: block;
      width: 98%;
    }

您可以添加一個新類(比如firstCol)并將其分配給每行的第一個輸入，并為每行的第二個輸入分配第二個類(比如secondCol)。

<div class="firstRow">
          <input type="text" class="firstCol" name="nom" placeholder="First Name">
          <input type="text" class="secondCol" name="prenom" placeholder="Last Name" style="float:right;">
        </div>
        <div class="secondRow">
          <input type="tel" class="firstCol" name="tel" placeholder="Telephone" style="width:47%;">
          <input type="text" class="secondCol" list="choice" placeholder="Gender">
          <datalist id="choice">
                        <option value="Male"></option>
                        <option value="Female"></option>
                    </datalist>
        </div>

而在CSS中。

.firstCol{
      margin-right: 5px
    }
    .secondCol{
      margin-left: 5px
    }

header {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 50px;
}

.container {
  width: 550px;
  height: 700px;
  margin: auto;
  text-align: center;
}

form:not(#check) {
  padding: 50px;
  margin: auto;
  border: 1px solid rgb(243, 240, 240);
  border-radius: 20px;
  text-align: center;
  background-color: rgba(225, 208, 199, 0.804);
}

.other input {
  display: block;
  width: 98%;
}

.other input:not(#check) {
  margin-bottom: 10px;
  height: 50px;
}

.firstRow,
.secondRow {
  display: flex;
}

.firstRow input,
.secondRow input {
  margin-bottom: 10px;
  height: 50px;
  flex: 1;
}
.firstCol{
  margin-right: 5px
}
.secondCol{
  margin-left: 5px
}
button {
  width: 100%;
  height: 50px;
  background-color: rgb(97, 69, 53);
  border-radius: 20px;
}

.box {
  display: flex;
  margin: auto;
}

#check {
  float: left;
}

<header>
  <img src="" alt="logo">
  <p style="color: rgb(6, 6, 6); font-weight: bold; font-size: 40px">Welcome to <span style="color:rgb(97, 69, 53);">BUDGE IT! </span></p>
  <p style="font-size: 30px; font-weight: bold;">SIGN UP to join us </p>
</header>
<div class="container">
  <form action="" method="post">
    <div class="firstRow">
      <input type="text" class="firstCol" name="nom" placeholder="First Name">
      <input type="text" class="secondCol" name="prenom" placeholder="Last Name" style="float:right;">
    </div>
    <div class="secondRow">
      <input type="tel" class="firstCol" name="tel" placeholder="Telephone" style="width:47%;">
      <input type="text" class="secondCol" list="choice" placeholder="Gender">
      <datalist id="choice">
                    <option value="Male"></option>
                    <option value="Female"></option>
                </datalist>
    </div>

    <div class="other">
      <input type="email" name="email" placeholder="Email">
      <input type="password" name="pass" placeholder="Password">
      <input type="password" name="passw" placeholder="Confirm password">
    </div>
    <div class="box">
      <input type="checkbox" name="check" value="1" id="check">
      <p style="color:rgb(97, 69, 53); font-size:17px; font-weight: bold;">I accept the Terms of Use & Privacy Policy
      </p>
    </div>
    <p><button type="submit" name="but"><span style="color:white; font-size: 20px; font-weight: bold;">Sign
                        Up</span></button></p>
    <br>
    <hr style="font-weight: bold;">
    <p style="font-weight: bold; color: rgb(97, 69, 53); text-decoration: none; font-size: 20px; ">Already have an account? </p>
    <button style="border-color:rgb(97, 69, 53);background-color: white;"><span
                    style="color:rgb(97, 69, 53); font-size: 20px; font-weight: bold;">Log in</span></button>
  </form>
</div>

<footer style="height: 40px;">
  <p style="border: 1px solid rgb(245, 241, 241) ; background-color: rgb(245, 241, 241); height: 40px; text-align: right;">
    Copyright @EHTP/1GI-2023</p>
</footer>