图片和文本在同一行

Question

我正在尝试使用codepen在屏幕的右侧放置一个图像，并在左侧放置一些相同高度的文本。我最初使用引导程序容器将它们放在插槽中，但当我将它链接到freecodecamp帮助时，我被告知这是导致我的程序员混乱的原因。我也尝试了浮动图像，但它似乎没有任何作用。

这是我的html：

<div style="background-color:#999; overflow:hidden;" class="well">
<div class="container-fluid">
<h1 class=" text-align-vertically text-center white-text"> <br> <br> <br> Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture. <br> <br> <br> <br> </h1> 
<h1 class="text-center white-text"> Web Developer -       User Experience Designer - Graphic Artist <br> <br> <br> <br> <br> </h1>

<img class="smaller-image1 image-margins circular-image resize-image" src="https://lh4.googleusercontent.com/-b5YzMfLsjTY/AAAAAAAAAAI/AAAAAAAAADw/QrZ6m4H7wkA/photo.jpg" alt="my photo">
    </div>

这是我的CSS：

smaller-image1 {
  width: 300px;
  height: 300px;
}

.image-margins {
    float: right;
    width: 300px;
    margin: 0 0 15px 20px;
    padding: 15px;
    border: 1px solid black;
    text-align: center;
}

 .circular-image {
  border-radius: 50%;
}

.resize-image {
  width: 100%;
  height: 100%;
 }