Simple FLEX possition problem

1

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:




Writing



 
    <a href="#">
    <article class="prom promo2">
        <h3>Dancing</h3>
    </article>
      </a> 
     <a href="#">
    <article class="prom promo3">
        <h3>Rukije</h3>
    </article>
     </a>
</div>

And here’s my CSS:

 .promo{
    display: flex;
}

.prom{
     background-repeat: no-repeat;
     height: 200px;
     background-size: cover;
	 background-position: 50% 50%;
}

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

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

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

.promo article{
    flex-basis: 33.333%;
}
2

Like this?: http://codepen.io/jenovs/pen/jBamQw

3

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.

http://codepen.io/imerljak/pen/OpOjXw

4

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