title: Bootstrap title not working on my modal window consistently...ideas?
body: <p>I have a bootstrap modal window on my site that I can't seem to get styled consistently.</p>
  
  <p>This is what my first modal looks like (and how I want it styled):
  <a href="https://i.stack.imgur.com/1gyv6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1gyv6.png" alt="enter image description here"></a></p>
  
  <p>This is the 2nd modal window and styling:</p>
  
  <p><a href="https://i.stack.imgur.com/FIK6B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FIK6B.png" alt="enter image description here"></a></p>
  
  <p>here is the css that styles the title and the close:</p>
  
  <pre><code>.modal-title {
      margin: 10px !important;
  }
  .close {
      opacity: 1 !important;
      position: relative !important;
      padding-right: 15px !important;
      top: 7px !important;
      left: 3px !important;
  }
  </code></pre>
  
  <p>Here is a copy of the relevant html for the modal windows:</p>
  
  <pre><code>&lt;div id="movie" class="modal fade" role="dialog" tabindex='-1'&gt;
      &lt;div class="modal-dialog"&gt;
  &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button  type="button" class="close" data-dismiss="modal"&gt;&lt;i class="fa fa-close"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;They Live (1988)&lt;/h4&gt;
      &lt;/div&gt;
       &lt;div class="modal-body"&gt;
          ...             
        &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;div id="contactUs" class="modal fade" role="dialog" tabindex='-1'&gt;
      &lt;div class="modal-dialog"&gt;
  &lt;div class="modal-content"&gt;
      &lt;div classs="modal-header"&gt;
          &lt;button  type="button" class="close" data-dismiss="modal"&gt;&lt;i class="fa fa-close"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;br&gt;
          &lt;h4 class="modal-title"&gt;Send Me a Note&lt;/h4&gt;
      &lt;/div&gt;
       &lt;div class="modal-body"&gt;
  &lt;form id="contact-send" method="post" action=""&gt;
  ...
          &lt;/form&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The html to call the modals:</p>
  
  <pre><code>&lt;a href="#" data-toggle="modal" data-keyboard="true" data-target="#movie"&gt;Movie&lt;/a&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>&lt;button type="button" class="cta btn btn-lg btn-success" data-keyboard="true" data-toggle="modal" data-target="#contactUs"&gt;Contact Us&lt;/button&gt;
  </code></pre>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/zAQuf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zAQuf.png" alt="enter image description here"></a></p>
  
  <p>and:</p>
  
  <p><a href="https://i.stack.imgur.com/4Ueb4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Ueb4.png" alt="enter image description here"></a></p>
  
  <p>Edit2:</p>
  
  <p>Messing around with my code a bit more, I see that if I remove the <code>modal-header</code> class and put the elements into <code>modal-content</code> that it seems to work.  I'll post a final edit if I figure out anything else.</p>