title: Why doesn't the image size reduce when the screen width is below 300px?
body: <p>I have this web page that looks okay on the desktop but does not adjust properly to smaller devices like mobile phones. I even tried using &quot;clamp&quot; for the width property in CSS but to no avail. It still overflows to the right of the screen and the elements do not stay centered like they are supposed to.</p>
  <p>Below is the code:</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>:root {
    --main-color: #087830;
    --secondary-color: #e7ffdb;
    --dark-color: #444;
    --light-color: #fafafa
  }
  
  body {
    font-family: Quicksand, sans-serif;
    background: radial-gradient(var(--light-color), var(--light-color), var(--secondary-color));
    background-repeat: no-repeat;
    color: var(--dark-color);
    text-shadow: 0 0 2px var(--light-color);
    margin: 0;
    padding: 0 1em;
    display: grid;
    place-items: center;
    font-size: 20px;
    overflow-x: hidden;
    word-wrap: break-word
  }
  
  a {
    text-decoration: none
  }
  
  input {
    box-sizing: border-box
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: Eczar, serif;
    font-weight: 700;
    margin: 0
  }
  
  h2 {
    color: var(--main-color)
  }
  
  section {
    border-bottom: 2px solid #b6fd92;
    width: 100%
  }
  
  .full-height {
    min-height: 100vh
  }
  
  .image-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    text-shadow: 0 0 20px var(--dark-color)
  }
  
  .cta-button {
    background: var(--main-color);
    color: var(--light-color);
    text-shadow: none;
    border: 2px solid var(--main-color);
    border-radius: 2em;
    padding: 10px 1em;
    font-weight: 700
  }
  
  .cta-button:hover {
    background: var(--light-color);
    color: var(--main-color);
    transition-duration: .4s
  }
  
  .navbar {
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
  }
  
  .navbar div {
    display: flex;
    align-items: center
  }
  
  .nav-title {
    height: 100%;
    gap: 10px
  }
  
  .navbar img {
    height: 70%
  }
  
  .nav-toggle,
  .nav-toggle-label {
    position: fixed;
    right: -100vh;
    top: 0;
    height: 80px;
    width: 110px;
    display: grid;
    grid-auto-flow: column;
    place-items: center;
    opacity: 0;
    color: var(--main-color);
    font-weight: 700
  }
  
  .website-title {
    max-width: 200px
  }
  
  .nav-toggle {
    z-index: 3
  }
  
  .nav-toggle-label {
    z-index: 2
  }
  
  .navbar a {
    text-decoration: none;
    color: var(--dark-color);
    margin: 0 5px;
    border-radius: 1em;
    padding: .5em 15px
  }
  
  .navbar a:hover {
    background: var(--light-color);
    color: var(--main-color);
    box-shadow: 0 0 5px var(--light-color);
    transition-duration: .4s
  }
  
  .hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 2em;
    gap: 50px
  }
  
  .hero div {
    max-width: 500px
  }
  
  .hero h2 {
    font-size: 3em;
    line-height: 1em
  }
  
  .hero img {
    width: 100%
  }
  
  @media screen and (max-width:1020px) {
  
    .nav-toggle,
    .nav-toggle-label {
      right: 10px;
      top: 10px
    }
  
    .nav-toggle-label {
      opacity: 1
    }
  
    .nav-toggle:checked~.navlinks {
      right: 0;
      transition-duration: .4s
    }
  
    .nav-toggle:checked~.nav-toggle-label {
      color: var(--light-color);
      text-shadow: none
    }
  
    .navlinks {
      position: fixed;
      top: 0;
      right: -200px;
      height: 100vh;
      width: 200px;
      background: var(--main-color);
      display: flex;
      flex-direction: column;
      justify-content: center;
      z-index: 1
    }
  
    .navlinks a {
      color: var(--light-color)
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="full-height"&gt;
    &lt;nav class="navbar"&gt;
      &lt;div class="nav-title"&gt;
        &lt;img src="logo.svg" alt="Logo"&gt;
        &lt;img class="website-title" src="website-title.svg" alt="Website Title"&gt;
      &lt;/div&gt;
      &lt;input type="checkbox" class="nav-toggle"&gt;
      &lt;span class="nav-toggle-label"&gt;Menu&lt;/span&gt;
      &lt;div class="navlinks"&gt;
        &lt;a aria-current="page" class="" href="/"&gt;Home&lt;/a&gt;
        &lt;a aria-current="page" class="" href="/"&gt;Link 2&lt;/a&gt;
        &lt;a aria-current="page" class="" href="/"&gt;Link 3&lt;/a&gt;
        &lt;a aria-current="page" class="" href="/"&gt;Link 4&lt;/a&gt;
        &lt;a aria-current="page" class="" href="/"&gt;Login&lt;/a&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;div class="hero"&gt;
      &lt;div&gt;
        &lt;h2&gt;Catchy Line&lt;/h2&gt;
        &lt;p&gt;Description bla bla bla bla bla bla bla bla bla bla bla&lt;/p&gt;
        &lt;br&gt;
        &lt;a aria-current="page" class="cta-button" href="/"&gt;CTA Button&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="hero"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How do I make my code responsive?</p>