为什么这个div不使用CSS移动？

Question

我在div内有一个表格。我想将div移到右侧，如果我使用这样的内联样式，则可以这样做：

<div class="joinform-page" style="margin-left: 30%;>

我想使用margin-left来移动它：在CSS中为30％，而不是作为内联样式，因为内联样式使媒体查询更加困难。但是它忽略了我在CSS中所做的任何边距更改。

这是完整的html：

<div class="joinform-page">
  <div class="form">
    <form action="data_in.php" method="post" name='data_in' id='data_in'>

      <input type="text" placeholder="Email" name="email_field" maxlength="60">
      <input type="text" placeholder="First Name (optional)" name="firstname"   maxlength="50">
      <input type="text" placeholder="Last Name (optional)" name="lastname" maxlength="50">

      <div><input type="hidden" id="password" name="password" value="pwdtemp"></div>
      <div><input type="hidden" id="comments" name="comments" value="none"></div>

      <button class="btn_class" style="color:rgb(255,255,255); background-color:rgb(25,25,25);  text-align:center;" id="btn_submit" onclick="GetDate();">Submit Form</button><br><br><br>

     <div style="padding-left:0%;">
     <label class="container">
     <span class="betajoinpage_cbx">Add me to your list</span>
     <input type="hidden" name="custom_checkbox" value="No">
     <input type="checkbox" id="ckbx" name="custom_checkbox" checked="checked"  value="Yes"><span class="checkmark" style="color:blue;"></span>
     </label></div><br>

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

这是相关的CSS类：

.joinform-page {
  width: 80%;
  padding: 0% 0 0;
  margin-top: -2.5%;
  margin-left: 30%; }

当我在CSS中使用margin-left时，为什么此div不移动。不作为内联样式。

感谢您的帮助。

Answer 1

实际上，它正在使用同一段代码。

如果仍然无法使用，则可能是父元素的样式或同一元素的另一种样式。

Answer 2

您上面的CSS可以正常工作。请确保您的CSS已正确导入，如下所示：

<!-- Where FILE_NAME is the name of your .CSS file --> 
<link rel="stylesheet" type="text/css" href="FILE_NAME.css">

.joinform-page {
  width: 80%;
  padding: 0% 0 0;
  /*margin-top: -2.5%;*/
  margin-left: 30%;
}

<div class="joinform-page">
  <div class="form">
    <form action="data_in.php" method="post" name='data_in' id='data_in'>

      <input type="text" placeholder="Email" name="email_field" maxlength="60">
      <input type="text" placeholder="First Name (optional)" name="firstname" maxlength="50">
      <input type="text" placeholder="Last Name (optional)" name="lastname" maxlength="50">

      <div><input type="hidden" id="password" name="password" value="pwdtemp"></div>
      <div><input type="hidden" id="comments" name="comments" value="none"></div>

      <button class="btn_class" style="color:rgb(255,255,255); background-color:rgb(25,25,25);  text-align:center;" id="btn_submit" onclick="GetDate();">Submit Form</button><br><br><br>

      <div style="padding-left:0%;">
        <label class="container">
     <span class="betajoinpage_cbx">Add me to your list</span>
     <input type="hidden" name="custom_checkbox" value="No">
     <input type="checkbox" id="ckbx" name="custom_checkbox" checked="checked"  value="Yes"><span class="checkmark" style="color:blue;"></span>
     </label></div><br>

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