Bootstrap title not working on my modal window consistently...ideas? - html

Question

I have a bootstrap modal window on my site that I can't seem to get styled consistently.
This is what my first modal looks like (and how I want it styled):
This is the 2nd modal window and styling:
here is the css that styles the title and the close:
.modal-title {
margin: 10px !important;
}
.close {
opacity: 1 !important;
position: relative !important;
padding-right: 15px !important;
top: 7px !important;
left: 3px !important;
}
Here is a copy of the relevant html for the modal windows:
<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<h4 class="modal-title">They Live (1988)</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div id="contactUs" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div classs="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<br>
<h4 class="modal-title">Send Me a Note</h4>
</div>
<div class="modal-body">
<form id="contact-send" method="post" action="">
...
</form>
</div>
</div>
</div>
</div>
The html to call the modals:
Movie
and
<button type="button" class="cta btn btn-lg btn-success" data-keyboard="true" data-toggle="modal" data-target="#contactUs">Contact Us</button>
edit 1: There are no parent divs. I did as suggested and removed the !important elements. I do have a form on the 2nd modal window and an iframe in the first, maybe this has to do with margins being set by those rules...looking into that now. Anyway this is what it looks like right now for the form:
and:
Edit2:
Messing around with my code a bit more, I see that if I remove the modal-header class and put the elements into modal-content that it seems to work. I'll post a final edit if I figure out anything else.

Answer 1

It is a simple syntax error that you may have overlooked.
The .modal-header inside #contactUS is not working because the class attribute is written as classs. Simply remove the extra letter.
You have a <br> tag before the h4 which I assume you added as an attempt to solve the problem. It is not needed so you can remove it.
The correct code would be like this:
.modal-title {
margin: 10px !important;
}
.close {
opacity: 1 !important;
position: relative !important;
padding-right: 15px !important;
top: 7px !important;
left: 3px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
Movie
<button type="button" class="cta btn btn-lg btn-success" data-keyboard="true" data-toggle="modal" data-target="#contactUs">Contact Us</button>
<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<h4 class="modal-title">They Live (1988)</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div id="contactUs" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<!-- was classs -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<!-- <br> -->
<h4 class="modal-title">Send Me a Note</h4>
</div>
<div class="modal-body">
<form id="contact-send" method="post" action="">
...
</form>
</div>
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/j1sb9gz3/