title: issues with !important (i think)
body: <p>Basically,</p>
  
  <pre><code>inside a div i have 2 divs
  div #1 has an img inside
  div #2 has text and a list inside
  </code></pre>
  
  <p>The outer div has a padding, the first div containing the image has a float left and top margin, the second div containing the text and list has a float right and top margin</p>
  
  <p>Their sizes are set in percentages, then I also have a @media query which checks for max-width and max-height.</p>
  
  <p>If the browser is resized under a certain amount of pixels in height or width some of the margins and widths/heights change and the div containing the image goes in the middle and the other div containing the text and list goes in the middle under the div containing the image.</p>
  
  <p>NOW-----</p>
  
  <p>I used !important for some of the css codes inside the media query and for some reason the div contaning the image and the div containing the text and list are stuck in the middle, image up top and text with list under...</p>
  
  <p>I took the !important out of the media query and they are still stuck...</p>
  
  <p>They're stuck like this(the media query output):</p>
  
  <pre><code>__________
  |        |
  |        |
  |________|
  __________
  |        |
  |        |
  |________|
  </code></pre>
  
  <p>When they are meant to be like this(normal css output):</p>
  
  <pre><code>__________       __________
  |        |       |        |
  |        |       |        |
  |________|       |________|
  </code></pre>
  
  <p><a href="https://jsfiddle.net/xxp1obzq/" rel="nofollow">jsFiddle Link &lt;&lt;&lt;&lt;</a></p>
  
  <p>Now what's weird is I tried to reproduce the error in jsFiddle by writing the code again but this time just for the image and text and I'm not getting the same issue...</p>
  
  <p><a href="https://jsfiddle.net/a416rzse/" rel="nofollow">sample error</a></p>