Form Class Not Working

I want to change the style of my bootstrap form to my own custom css. So, I create a class in my form, but the changes I make to the class's css isn't changing the style of the form.

Here's my form:

<li class="dropdown">
                  <a class="dropdown-toggle" href="#" data-toggle="dropdown"> <span class="glyphicon glyphicon-log-in"></span> Login</a>
                  <div class="dropdown-menu" style="padding: 5px; padding-bottom: 5px;">
                  <form  class="login-form" action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
                  <input id="user_username" placeholder="Email" style="margin-bottom: 15px;" type="text" name="user_username" size="30" />
                  <input id="user_password" placeholder="Password" style="margin-bottom: 15px;" type="password" name="user_password" size="30" />
                  <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user_remember_me" value="1" />
                  <label class="string optional" for="user_remember_me"> Remember me</label>
                  <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
                  </form>
                  </div>
                </li>

And here's my css:

    .login-form {
    left:0px;
    right:0px;
    width:300px;
    margin:0 auto;
    background-color:#000000;
    padding:60px;
}