title: Resizing fixed images inside div
body: <p>Right now, if you look at my page on my computer, it will look the way I want it to look. Now if you go on a pc with higher/lower resolution, the images will move, BUT the text will stay in place, why is that? </p>
  
  <p>I have tried messing around with the <code>position:</code> and height/width percentages, but haven't managed to get it to work properly yet. </p>
  
  <p>I'd like to get the images to stay in one place and resize depending on the resolution. </p>
  
  <p>1st: </p>
  
  <p><img src="https://i.stack.imgur.com/kgwBI.png" alt="enter image description here"></p>
  
  <p>2nd: </p>
  
  <p><img src="https://i.stack.imgur.com/s9EE8.png" alt="enter image description here"></p>
  
  <p>The HTML: </p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div class="pricing"&gt;Pricing&lt;/div&gt;
      &lt;div&gt;&lt;img src="images/bracket.png" class="bracket"&gt;&lt;/div&gt;
  
      &lt;div class="skills"&gt;Skills&lt;/div&gt;
      &lt;div&gt;&lt;img src="images/bracket.png" class="bracket_02"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>#content
  {
      margin: 0% 13% auto;
      height: 100%;
      width: 65%;
      border-style: solid;
      border-width: 1px;
      color: white;
      position: absolute;
  }
  
  .pricing
  {
      font-size: 40;
      font-weight: bold;
      margin-top: 6%;
      margin-left: 20%;
      color: #1eb1f5;
      position: absolute;
  }
  
  .skills
  {
      font-size: 40;
      font-weight: bold;
      margin-top: 6%;
      margin-left: 70%;
      color: #1eb1f5;
      position: absolute;
  }
  
  .bracket
  {
      margin-top: 11%;
      margin-left: 8%;
      position: absolute;
  }
  
  .bracket_02
  {
      margin-top: 11%;
      margin-left: 57%;
      position: absolute;
  }
  </code></pre>
  
  <p>I usually use <code>px</code> for everything, but I wanted to try using <code>%</code>, as I have heard it can be better for mobile for example.</p>