# Simple FLEX possition problem

**URL:** <https://forum.freecodecamp.org/t/simple-flex-possition-problem/97418>\
**Category:** General\
**Created:** [March 16, 2017, 9:46pm UTC](https://forum.freecodecamp.org/t/simple-flex-possition-problem/97418 "2017-03-16T21:46:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![BackY](https://avatars.discourse-cdn.com/v4/letter/b/91b2a8/32.png) [@BackY](https://forum.freecodecamp.org/u/BackY)\
**Post date:** [March 16, 2017, 9:46pm UTC](https://forum.freecodecamp.org/t/simple-flex-possition-problem/97418/1 "2017-03-16T21:46:13Z")

</div>

Hello there guys,

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

> **[Screenshot](https://prnt.sc/ekv786)**
>
> Captured with Lightshot

Instead I can only make it look like this:

![](https://global.discourse-cdn.com/freecodecamp/original/3X/e/f/efb92cbdf58d295c28d1eeacf9f9626c20fd4da0.jpeg)

**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%;
}
```

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [March 16, 2017, 11:02pm UTC](https://forum.freecodecamp.org/t/simple-flex-possition-problem/97418/2 "2017-03-16T23:02:43Z")

</div>

Like this?: [http://codepen.io/jenovs/pen/jBamQw](http://codepen.io/jenovs/pen/jBamQw)

---

<div class="post-metadata">

**Author:** ![imerljak](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/imerljak/32/44086_2.png) [@imerljak](https://forum.freecodecamp.org/u/imerljak)\
**Post date:** [March 17, 2017, 12:36am UTC](https://forum.freecodecamp.org/t/simple-flex-possition-problem/97418/3 "2017-03-17T00:36:37Z")

</div>

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](http://codepen.io/imerljak/pen/OpOjXw)

---

<div class="post-metadata">

**Author:** ![BackY](https://avatars.discourse-cdn.com/v4/letter/b/91b2a8/32.png) [@BackY](https://forum.freecodecamp.org/u/BackY)\
**Post date:** [March 17, 2017, 12:58am UTC](https://forum.freecodecamp.org/t/simple-flex-possition-problem/97418/4 "2017-03-17T00:58:24Z")

</div>

This is what I got 😕

> **[Screenshot](https://prnt.sc/ekx2nr)**
>
> Captured with Lightshot

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

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 9:43am UTC](https://forum.freecodecamp.org/t/simple-flex-possition-problem/97418/5 "2021-01-17T09:43:04Z")

</div>