画像と同じ行のテキスト

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

Answer 1

あなたはそれが画像をすべて取るなるため

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

を取り除く必要があります同じ行にテキストのための空き領域を残さないでください。 また、HTMLファイルのテキストの前にイメージを置く必要があります。

live example