How do I make it so each box does not overlap the one to its right?

Question

fyi - react css is pretty similar to regular css

each individual box code

  export const CardWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 4px;
  flex-direction: column;
  background: ${(props) => props.theme.colors.backgrounds.project};
  padding-bottom: 28px;
  padding-right: 0px;
  height: 300px;
  width: 375px;
`;

each box should look like this

but when i increase the width, in this img below, there should be black lines to seperate each box

  export const DeploymentsWrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, 335px);
  grid-gap: 20px 30px;
  max-height: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 30px 30px 30px;
`;

Answer 1

Set max-width for your cards to 100%