title: cannot add space-between to arrows in a container
body: <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>/* GLOBAL */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&amp;display=swap');
  
  :root {
      --nav-hue: #2300d1;
      --background-color: #100e1a;
  }
  
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  body {
      background-color: var(--background-color);
      font-family: 'Poppins', sans-serif;
      overflow-x: hidden;
  }
  
  h1, h2, h3, h4 {
      font-weight: 300;
  }
  
  ul {
      list-style: none;
  }
  
  a {
      text-decoration: none;
      color: white;
  }
  
  i {
      margin-right: 0.3rem;
  }
  
  /* NAV */
  .nav {
      height: 60px;
      width: 100vw;
      background-color: black;
      color: white;
      border-bottom: 0.15rem solid var(--nav-hue);
  }
  
  .logo {
      display: inline;
      padding: 0.1rem 1.5rem;
  }
  
  .nav .left-menu, .nav .right-menu {
      display: flex;
      align-items: center;
      margin-top: 0.4rem;
  }
  
  .nav .left-menu {
      flex: 2;
      margin-left: 1rem;
  }
  
  .nav .right-menu {
      flex: 1;
      margin-left: 10rem;
  }
  
  .nav ul li {
      padding: 0 0.8rem;
  }
  
  .nav-search {
      border: 1px solid white;
      padding: 0.4rem 0.6rem;
      border-radius: 2px;
      outline: none;
      text-align: center;
  }
  
  .nav-search:focus {
      transition: letter-spacing 200ms ease-in-out;
      letter-spacing: 0.05rem;
      border: 1px solid var(--nav-hue);
  }
  
  .nav .nav-hover:hover, .nav .nav-hover:hover a, i:hover {
      transition: all 100ms ease-in-out;
      color: var(--nav-hue);
      cursor: pointer;
  }
  
  .small-hover:hover {
      transition: all 100ms ease-in-out;
      transform: scale(1.5) translateY(-0.2rem);
  }
  
  
  
  
  /* MAIN */
  .container {
      max-width: 1100px;
      margin: auto;
      padding: 0.5rem;
  }
  
  /* SHOWCASE */
  .showcase {
      place-items: center;
      margin-top: 1rem;
      z-index: 2;
  }
  
  .showcase-img {
      width: 960px;
      height: 400px;
      background-color: blue; /* For testing */
      border-radius: 4px;
  }
  
  .showcase-img img {
      width: 100%;
      height: 100%;
      opacity: 0.1;
  }
  
  .showcase ul {
      display: flex;
      bottom: 13.73rem;
      position: relative;
      justify-content: space-between;
  }
  
  .showcase ul li {
      font-size: 2rem;
      float: left;
  }
  
  /* UTILS */
  /* GRID &amp; FLEX */
  .flex {
      display: flex;
      text-align: center;
  }
  
  .grid {
      display: grid;
      grid-template-columns: 1fr;
  }
  
  .grid-center {
      place-items: center;
  }
  
  .nav-hue {
      color: var(--nav-hue);
  }
  
  .bold {
      font-weight: 400;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" /&gt;
      &lt;link rel="stylesheet" href="all.css"&gt;
      &lt;title&gt;GameBuy.com&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;!-- NAVBAR --&gt;
      &lt;div class="nav"&gt;
          &lt;div class="flex"&gt;
              &lt;h1 class="logo"&gt;Game&lt;span class="nav-hue bold"&gt;Buy.com&lt;/span&gt;&lt;/h1&gt;
                  &lt;ul class="left-menu"&gt;
                      &lt;li&gt;&lt;span class="nav-hover"&gt;&lt;i class="fas fa-home"&gt;&lt;/i&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/i&gt;&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span class="nav-hover"&gt;&lt;i class="fas fa-question"&gt;&lt;/i&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/i&gt;&lt;/span&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;ul class="right-menu"&gt;
                      &lt;li&gt;&lt;input class="nav-search" type="search" placeholder="SEARCH"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;i class="fas fa-shopping-cart small-hover"&gt;&lt;/i&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;i class="fas fa-search small-hover"&gt;&lt;/i&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
      &lt;/div&gt;
  
  
      &lt;div class="container"&gt;
  
          &lt;!-- SLIDER SHOWCASE --&gt;
          &lt;div class="showcase grid"&gt;
              &lt;div class="showcase-img"&gt;
                  &lt;img src="images/#" alt=""&gt;
              &lt;/div&gt;
              &lt;ul&gt;
                  &lt;li class="left-flash"&gt;&lt;i class="fas fa-chevron-left"&gt;&lt;/i&gt;&lt;/li&gt;
                  &lt;li class="right-flash"&gt;&lt;i class="fas fa-chevron-right"&gt;&lt;/i&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>// I want the left arrow to stick to the left side of the showcase-img container and the right arrow to the right side... I tried justify-content: space-between; but it didn't work, I can of course add margins but that's annoying and would make the site less responsive, any help is greatly appreciated!</p>