I'm trying to nest an image on top of another (using twitter bootstrap) the problem is when I re-size my browser, the arrow image isn't consistently located (see the image)

It was supposed to be:

![enter image description here](https://i.stack.imgur.com/9fwJn.png)

but when the browser re-sized:

![enter image description here](https://i.stack.imgur.com/0qFlf.png)

and the code is:

```
<div class="container">
<div class="row">
    <div class="col-lg-4">
        <div>
            <img alt="" src="../images/fulltime.png" class="img-responsive" />
            <img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; top: 170px; left: 341px" />
            <label style="position: absolute; top: 12px; left: 43px; font-size: 19px; font-family: Trebuchet MS;
                color: White;">
                Professional
            </label>
            <p style="position: absolute; top: 80px; left: 25px; font-size: 13px;">
                random text
                <br />
                random text
                <br />
                random text
            </p>
        </div>
    </div>
  </div>
</div>

```

What did I do wrong here? Or is it not possible?

Note: I just changing my recent web with bootstrap, so I'm new to this stuff and I use bootstrap v3 if it helps.

Thank you.