positioning images around text using bootstrap

Question

Doing a website recreation and trying to use bootstrap to do it. I ran into a problem of trying to position an image to the right of some text near the right edge of the web page.

Using margin-top and margin-right moves the picture how I want but using margin-bottom seems to have no effect... which is what I need. Any idea what I am doing wrong?

Here's a link to my codepen: https://codepen.io/gkunthara/pen/eRXmoP

And releveant code:

HTML

<div class="second-content">

    <h2 class="second-header"> Bond Back Guarantee</h2>
    <p class="second-header-p text-left"> Moving homes in Sydney is 
stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not, 
    just notify us within 72 hours and we'll gladly return to reclean any 
    problem areas - free of charge.</p>
    <img class="first-pic pull-right gap-right" src="firstpic.png">

</div>

CSS:

.second-content .first-pic {

width: 30%;
border: solid black;
margin-right: 100px;
margin-bottom: 50px; /* no effect /*

}

EDIT: updated codepen link just showing relevant code

Answer 1

As per your codepen you wanted image after text then need to add

float:left in this class second-header-p text-left.

.second-header-p.text-left{
   float:left;
}