Why doesn't this div move using css?

Question

I have a form inside a div. I want to move the div to the right, and I can do that if I use an inline style like this:

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

I want to move it using margin-left: 30% in the css, not as an inline style because inline styles make media queries more difficult. But it ignores any margin changes I make in the css.

Here's the full 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>

Here's the relevant css class:

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

Why doesn't this div move when I use margin-left in the css,. not as an inline style.

Thanks for any help.

Answer 1

The CSS you have above works as you would expect. Please ensure your CSS is correctly imported like so:

<!-- 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>

Answer 2

Actually It was working with the same piece of code.

If it still doesn't work, there might be styling for parent element or another styling for same element.