I'm trying to style cards in React Native. I have them in a horizontal scroll view and I'm trying to make them have an even margin on both sides without it looking wonky.

Here's what I'm trying to achieve.

But this is what I have right now..

The code provided first is my card component.

The second piece of code is the scrollview in my app.js just in case thats needed as well.

Thanks in advance to anyone who can help me!

  <Container>
    <Cover>
      <Image source={props.image} />
      <Category>{props.category}</Category>
    </Cover>
    <Content>
      <AuthorPic source={props.authorpic} />
      <Wrapper>
        <Title>{props.title}</Title>
        <Author>{props.author}</Author>
      </Wrapper>
    </Content>
  </Container>
);

export default Card;

const Content = styled.View`
  padding-left: 20px;
  flex-direction: row;'
  align-items: center;
  height: 80px;
`;

const AuthorPic = styled.Image`
  width: 44px;
  height: 44px;
  border-radius: 22px;
`;

const Title = styled.Text`
  color: white;
  font-size: 20px;
  font-weight: 600;
`; // This is caption

const Author = styled.Text`
  color: #a4a4a4;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  margin-top: 4px;
`;

const Wrapper = styled.View`
  margin-left: 10px;
`;

const Container = styled.View`
  background: #282828;
  width: 315px;
  height: 280px;
  border-radius: 14px;
  margin-left: 20px;
  margin-top: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
`;

const Cover = styled.View`
  width: 100%;
  height: 200px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  overflow: hidden;
`;

Here's the scrollview

<ScrollView
  horizontal={true}
  style={{ paddingBottom: 30 }}
  showsHorizontalScrollIndicator={false}
>