title: Expanding element beyond size specified
body: <p>I have this html and this css.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.entry-content &gt; .greyfruitdrawing {
    height:2000px !important; 
    width:2000px !important; 
    margin-top:40px;
  }
  
  .redletters1 {
    font-size:40px; 
    opacity:0.7; 
    color:red;
    position:relative;
    top: 20px;
    font-weight: bolder;
    line-height:1.6;
    text-align:justify;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="greyfruitdrawing"&gt;
    &lt;img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" alt=""width="300" height="201"class="alignnone size-medium wp-image-6978"/&gt;
  &lt;/div&gt;
  &lt;div class="redletters1"&gt;SOME TEXT.&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that a) it won't expand by the size css is telling it to. b) elements are interacting in a way they shouldn't. Adjusting <code>greyfruitdrawing</code> affects position of <code>redletters1</code></p>
  
  <p>Site: <a href="https://4309.co.uk/about-us/" rel="nofollow noreferrer">https://4309.co.uk/about-us/</a></p>