要素配置を横並びにしたい

Question

前提・実現したいこと

#####以下画像のように、Twitterのタイムラインをその上の要素（DNA）の右に横並びになるようにしたいです。

発生している問題・エラーメッセージ

全体の要素にfloat:leftを指定しているのに、
要素が下に回り込んでしまいます。

該当のソースコード

#####－－－－HTML－－－－－－－－－－－

<div class="dna-twitter-wrapper">
    <div class="container">
      <div class="dna-twitter-contents">
        <div class="dna">
          <img src="img/logo_kgu.png">
          <h2>DNA of "KG"</h2>
          <h4>関学について</h4>
          <p>関西学院はキリスト教主義による教育を理念として生まれ、現在は兵庫県西宮市と三田市、宝塚市、大阪府箕面市、大阪梅田、東京丸の内にキャンパスを設け、幼稚園から大学院までを擁する総合学園です。</p>
        </div>
        <div class="timeline">
          <a class="twitter-timeline" data-width="300" data-height="500" href="https://twitter.com/KwanseiGakuin?ref_src=twsrc%5Etfw">Tweets by KwanseiGakuin</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>

#####－－－－CSS－－－－－

.dna-twitter-wrapper{
  float:left;
}

.dna-twitter-contents{
  width:1000px;
  
}

.dna{
  position: relative;
  width:600px;
}

.dna img{
  opacity: 0.2;
  padding:30px 0 0 0;
}

.dna h2{
  position: absolute;
  top:5%;
  left:10%;
}

.dna h4{
  position: absolute;
  top:30%;
  left:10%;  
  text-align: center;
}

.dna p{
  position: absolute;
  top:50%;
  left:10%;
  text-shadow: white 5px 0 5px;
  width:80%;
}

.twitter-timeline{
  width:300px;
}

#####ーーーーーーーーーーーーーーーーーー

試したこと

widthの指定変更
float,displayなど要素配置

補足情報（FW/ツールのバージョンなど）

Comments

[hatena19]

コードはマークダウン書式のコードブロック内にいれてください。

[Maush]

修正したらとてもキレイになりました。ありがとうございます。

Answer 1

.dna-twitter-contents {
    display: flex;
}

でどうでしょう？
flexを使う場合はfloat:left不要になるので消してください。

floatでやる場合は、外枠の.dna-twitter-wrapperではなく、左に置きたい塊（この場合は.dna）にfloat:leftを付けると左に寄ると思いますが、flexも覚えておくと色々使えて便利だと思います＾＾！

Comments

[Maush]

ご回答いただきありがとうございます。
いただいたように変更してみたところ、横並びになりました！
苦戦していたので、大変助かりました。。。

display:flexとfloat:leftの違いをもっと勉強してみます。

[achamaru]

おお、解決して良かったです ^ ^ ！