title: CSS change element Height and Width
body: <p>I have CSS envelope as a Element. I want to Increase 50 px height and width of Element. I changed CSS property but it not working. now How can I increase Element Height and Width? </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>#envelope {
            background: #F66B40;
             width: 300px;
             height: 200px;
             position: absolute;
             left: 50%;
             top: 40%; 
             margin-left: -150px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
          }
  
          #lid {
            position: relative;
            top: -150px;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 0 150px 150px 150px;
            border-color: transparent transparent #F66B40 transparent;
  
          }
  
          #letter {
            position: relative;
            background: #f6f6f6;
            padding-top:5px;
            padding-left: :5px;
            padding-right:5px;
            top: -150px;
            width: 280px;
            height: 200px;
            left: 10px;
            top: -220px;
            animation: out 5s infinite linear;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="envelope"&gt;
      &lt;div id="lid"&gt;&lt;/div&gt;
      &lt;div id="letter"&gt;&lt;/div&gt;
      &lt;div id="left-corner"&gt;&lt;/div&gt;
      &lt;div id="right-corner"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JSFIDDLE:</p>
  
  <pre><code>https://jsfiddle.net/0L37kehb
  </code></pre>