**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 **

<div id="main">
  <div id="location">
    <div id="one"></div>
    <div id="two">deliver to</div>
    <div id="three">400072</div>
  </div>
  <div >
    <label  id="fruits">
      Fruits
    </label>
    <label > 
      Vegetables
    </label>
    <label >
      Dairy&#38;Bakery
    </label>
    <label >
      something
    </label>
    <label >
      Something
    </label>
    <label >
      Something
    </label>
  </div>
</div>

#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="radio"]{
  opacity: 0;
  height: 0;
  width: 0;
}
@media only screen and (max-width: 600px) {
  .categories{
    overflow-x: scroll;
  }

CodePudding user response：

Try this

.categories{
    justify-content: space-between;
  }

CodePudding user response：

.categories{
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex: 1;
}