Flexbox item specified widths not being used

Tell us what’s happening:
I’d like my flex items to be exactly 50% of the width of the container. So there should be two items per row, each exactly 50% of the width of the length of the row, before the flex-wrap property pushes the next item to the next row. Problem is, when I set the items’ width to be 50%, they end up not being 50% of the width. They end up being a bit larger, pushing the items to the next row prematurely.

Any ideas as to why this might be happening?

Below is the styling in question, and here is a link https://codepen.io/phillthephill/pen/QWGEjeK to a forked version of what I’ve got in total. The images I use aren’t available, obviously, but the flexbox itself is behaving the same regardless.

Your code so far

   .cardContainer{
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  margin: auto;
  border-width: 1px;
  border-style: solid;
  border-color: #707070;
}

.cardContainer > img {
  width: 50%;
  height: auto;
  border-width: 1px;
  border-style: solid;
  border-color: red;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

Hi, the border size and the solid border thingy cause this. either you need to remove the border width and style or you can give that img element the width of %49.4.

1 Like

I wouldn’t recommend calculating weird width values (plus, those values could vary if you have a responsively resizing image), but to try box-sizing:border-box instead.

1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

Thanks so much, that did the trick! I knew it was something simple, for some reason just couldn’t find it when looking through the docs.