Simple FLEX possition problem

Hello there guys,

I need a bit of help making this code, look like this:

Instead I can only make it look like this:

Here’s my HTML:


    <a href="#">
    <article class="prom promo2">
     <a href="#">
    <article class="prom promo3">

And here’s my CSS:

    display: flex;

     background-repeat: no-repeat;
     height: 200px;
     background-size: cover;
	 background-position: 50% 50%;

     background: url('../images/promo1.jpg');

     background: url('../images/promo2.jpg');

     background: url('../images/promo3.jpg');

.promo article{
    flex-basis: 33.333%;

Like this?:

used @jenovs pen as a base…

perhaps something like this?? instead of using the image as a background use it inline and create an overlay on top of it.

This is what I got :confused:

I think the whole problem is the div’s not getting wider than the content they have inside. When I write more, they get wider, is there a way for me to force it to be 33% ?

Edited: I think I found the problem. I put the tags inside the div,.
Thank you both soo muchhh!!

Edited: fixe