title: Why does my bottom right image keep getting stretched?
body: <p>I'm new at coding (especially html/css/js) and for some reason, my bottom right image, keeps getting strected and it's not at the bottom right. The original image's resolution is 2280 x 2280.</p>
  <p>This is for school. Is there any way to fix this simply? I'm really not sure where the error is.`</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>body {
    background-image: url("https://lh3.googleusercontent.com/3ZUxEMdTqMRqUSdgVZ2o-g64VwIIpg9vrudRJ_sgHc0sH8kSyw2wniPdctzoJvYkIWxCdMWG7z02RtSndmuDdtuBRbnC-KiCjJIIWitWyTvbOlSIycuZTwTFYhqGr2qj3YF8K84rlA=w2400?source=screenshot.guru");
    height: 100%;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    font-family: 'Carter One', cursive;
    color: white;
  }
  
  h1 {
    color: white;
    text-align: center;
    
  }
  h2 {
    color: white;
    text-align: center;
  }
  img {
    border: 5px solid #FFFFFF;
  }
  body, html {
    height: 100%;
    margin: 0;
    font-family: 'Carter One', cursive;
  }
  .topnav {
    overflow: hidden;
    background-color: #333;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    background-color: #F3721D;
    color: white;
  }
  .top_left{
     float: left;
     position: absolute;
     left: 16px;
  }
  .right {
     float: right;
     position: absolute;
     top: 200px;
     right: 16px;
  }
  .bottom_left {
     float: left;
     bottom: 0px;
      left: 16px;
      z-index: 10;
      padding: 0px;
      margin: 500px 500px 100px 16px;
  }
  .bottomright {
      float: right;
     bottom: 0px;
      right: 16px;
      z-index: 10;
      padding: 0px;
      margin: 500px 16px 100px 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Charlotte's super cool art gallery&lt;/title&gt;
          &lt;link rel="stylesheet" href="C:\Users\blazette\Downloads\bs\CSS\mystyle.css"&gt;
          &lt;link href="https://fonts.googleapis.com/css2?family=Carter+One&amp;display=swap" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
  &lt;div class="topnav"&gt;
    &lt;a class="active" href="#home"&gt;Home&lt;/a&gt;
    &lt;a href="#Commissions"&gt;Commissions&lt;/a&gt;
    &lt;a href="#about"&gt;About&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="cubed"&gt;
  &lt;h1&gt;I design stuff.&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="cubed"&gt;
      &lt;h2&gt; My works.&lt;/h2&gt;
    &lt;/div&gt;
      &lt;div class="top_left"&gt;
      &lt;img src="https://lh3.googleusercontent.com/nXUNj-kqfceSzKATH6slZLbb10j9p-WUilkT8v5EFBoA8wsfPJHxaBflhe51roafWlM8FV8z8rlOI4ET_O5j0pyHCoMN9W0_y8XGBcwsS7PSmBMtg-_K6x6VpoxQ0zts8C77DtR7nw=w2400?source=screenshot.guru" img width="310" height="372" id="top_left"&gt;
     &lt;p&gt;
    A digital illustration of Sherlock Holmes &lt;br&gt;from the TV series Sherlock. 
    &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="bottom_left"&gt;
    &lt;img src="https://lh3.googleusercontent.com/AiNJsDbDBkv0rXUj0wEe-vdggMKBTNFEyfB-Ukw9DrsLAKj7I_-jWjxOPYMG50ItNXolThQesF3LnVyjsuPSRkhln0nmoL1cdEewTr7H03w2JauCUqseab2Wol-9mP8Adv0dT18iiw=w2400?source=screenshot.guru" img width="310" height="372"&gt;
    &lt;p&gt;
    A digital illustration of Clockson. An &lt;br&gt;original character based on antique clocks
    &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="right"&gt;
    &lt;img src="https://lh3.googleusercontent.com/9NRWdbN3EqE5u6Z4cZDZmBVu2Ar3o8lcBR09C8gtTXDmz0rDdZRuaL23UDM7B-bgBVSfg_4w4lvZiV4I6qwDlHoBsYCbgjybw5ZOGPtu_vj-8whkKHtaKN9PwbNEDix-RHD2zMHLrQ=w2400?source=screenshot.guru" img width="310" height="372" id="right"&gt;
    &lt;p&gt;
    Doctor Who fanart of the 13th Doctor.
    &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="bottomright"&gt;
    &lt;img src="https://lh3.googleusercontent.com/BhntO9ci2WyceI-7qWdlNzsUcS0Bo8_29s2HDO09gM2nSV6Syehodp5q14wQ9vgUUpE8KL9elU9z52xLHDYhigypqpAnFO0inqgoW1fOlTRwlCeXwH6uppVSLBjHBKMfXfQ14xlIJw=w600-h315-p-k" width="310" height="310"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>`</p>