title: How to use display in @media
body: <p>I have a text div which has somehow divided itself into two separate lines and won't align into a single line. I'm trying to use <code>display: initial;</code>, which should place it all on one line. It's refusing to respond to <code>margin-top</code> or <code>margin-bottom</code> and responds only to positive <code>line-height</code>. There are three possible options. Ideally I'd like thr text all in one line, 2nd most desirable reducing the line height with the negative values, 3rd, using margin to raise the height of the text on the page. Tried using <code>important</code> doesn't respond.</p>
  
  <p>Css:</p>
  
  <pre><code>@media (max-width: 5000px) and (min-width: 768px) {.awpcp-listing-excerpt-extra {display: initial; line-height:50%; margin-top:-20px;}} 
  </code></pre>
  
  <p>Html</p>
  
  <pre><code>&lt;div class="awpcp-listing-excerpt 
  $awpcpdisplayaditems 
  $isfeaturedclass" data- 
  breakpoints-class-prefix="awpcp- 
  listing-excerpt" data- 
  breakpoints='{"tiny": [0,328], 
  "small": [328,600], "medium": 
  [600,999999]}'&gt;
  &lt;div class="awpcp-listing-excerpt- 
  thumbnail"&gt;. 
  </code></pre>
  
  <p>Page: desktop view: <a href="https://adsler.co.uk/browse-adsler/" rel="nofollow noreferrer">https://adsler.co.uk/browse-adsler/</a></p>
  
  <p>Text with yellow background) 
     
     </p>