[This JSFiddle](https://jsfiddle.net/berrw9h3/) is a rough representation of my code. I have included all CSS styles that I believe could be affecting the problem. Some of these are required for my responsive design, so I need to work out what style is causing the issue in order to find a workaround.

As you can see, my `.text` div (in green) is sitting outside the bounds of it's container `article` (in yellow). On my actual project, this is causing the text to be cut off. In my JS example, it's simply extending `.text` beyond the edge of its container, `main`

The layout uses flexbox. The basic idea is that `.image` and `.text` both sit at 50% width, so they sit next to each other, and `.text` has a `24px` margin to the left so there is a neat gap in between them.

Why is `.text` sitting outside of its bounding container?

```
article {
  display: flex;
  width: 100%;
  margin-left: 24px;

  > * {
    flex 0 0 50%;
  }
}

.image {
  flex: 1 0;
  img {
    max-width: 100%;
  }
}

.text {
  flex: 1 0;
  margin-left: 24px;
  width: calc(50% - 24px);
}

```