title: make elements overflow on only right side
body: <p>**I want first element to stay right where it is. Second element should scroll when screen resizes. fruits should not get hide under location. Everything works fine until window resizes to 600px. when window resizes it overlaps the first element. I set it to overflow-x scroll. that's what I want but the second element gets overlapped by first element. margin-left not working. position relative not work **</p>
  <p><a href="https://i.stack.imgur.com/EEfGY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EEfGY.png" alt="before resizing the window" /></a>
  <a href="https://i.stack.imgur.com/H353p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H353p.png" alt="after resizing the window" /></a></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;main&quot;&gt;
    &lt;div id=&quot;location&quot;&gt;
      &lt;div id=&quot;one&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;two&quot;&gt;deliver to&lt;/div&gt;
      &lt;div id=&quot;three&quot;&gt;400072&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;categories&quot;&gt;
      &lt;label class=&quot;cat&quot; id=&quot;fruits&quot;&gt;
        Fruits
      &lt;/label&gt;
      &lt;label class=&quot;cat&quot;&gt; 
        Vegetables
      &lt;/label&gt;
      &lt;label class=&quot;cat&quot;&gt;
        Dairy&amp;#38;Bakery
      &lt;/label&gt;
      &lt;label class=&quot;cat&quot;&gt;
        something
      &lt;/label&gt;
      &lt;label class=&quot;cat&quot;&gt;
        Something
      &lt;/label&gt;
      &lt;label class=&quot;cat&quot;&gt;
        Something
      &lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang- prettyprint-override"><code>#main{
    display: flex;
    background-color: thistle;
  }
  /* LOCATION */
  #location{
    display: grid;
    grid-column-gap: 5px;
    border-right: solid 1px #a9a3a3;
  }
  #one{
    grid-column:1;
    grid-row:1/span 2;
    align-self: center;
  }
  #two,#three{
    grid-column: 2;
    justify-self: center;
  }
  #two{
    align-self: flex-start;
    white-space: no-wrap;
  }
  #three{
    align-self: flex-end;
    font-weight: bold ;
  }
  /* CATEGORIES */
  .categories{
    display: flex;
    justify-content: space-around;
    width: 95vw;
  }
  .cat{
    align-self: center;
    padding: 0 5px;
    transition: all 0.5s ease-out;
    cursor: pointer;
  }
  input[type=&quot;radio&quot;]{
    opacity: 0;
    height: 0;
    width: 0;
  }
  @media only screen and (max-width: 600px) {
    .categories{
      overflow-x: scroll;
    }
  </code></pre>