2つのセクションを同じ行に保存するにはどうすればよいですか？

Question

私は2つのセクションが互いに隣り合っているウェブサイトデザインに取り組んでいますが、何らかの理由で1つのセクションが別のセクションの下に入ります。誰かが問題を見つけるのを助けることができますか？ありがとう！

HTMLコード：

<section id="sec1"> 
    <img src="https://tse1.mm.bing.net/th?&id=OIP.Mbd6b4f30000f7e872ca4c55c2cedd6fao0&w=300&h=215&c=0&pid=1.9&rs=0&p=0&r=0" id="img1"> 
    <h6 class="bodytext">Watershed Definition</h6> 
    <p class="bodytext">A ridge or area of land that separates waters flowing to different rivers, basins, or seas</p> 
</section> 
<section id="sec2"> 
    <img src="http://www.nature-education.org/estuary.gif" id="img1"> 
    <h6 class="bodytext">Estuary Definition</h6> 
    <p class="bodytext">An arm or inlet of the sea at the lower end of a river or body of water.</p> 
</section> 

CSSコード：

#sec1 { 
background-color: #75c776; 
width: 400px; 
height: 550px; 
margin-left: 300px; 
margin-top: 40px; 
border-radius: 5px; 
border-style: solid; 
clear: right; 
} 
#sec2 { 
background-color: #75c776; 
width: 400px; 
height: 550px; 
margin-left: 800px; 
margin-top: 40px; 
border-radius: 5px; 
border-style: solid; 
clear: left; 
} 

Answer 1

あなたがBに表示され、このコードを試してみてくださいあなたはそれを浮かそうとしています（あなたの使用：左/右）からですか？あなたが動作するはずのみ第二の両方の左に、そして明確な権利を、それらをフロート場合

あなたは

...フロートはしかし設定されていません。十分な水平スペースがない場合、それらはお互いの上に表示されます。

Answer 2

あなたはソリューションを取得します:)

#sec1 { 
background-color: #75c776; 
width: 400px; 
height: 550px; 
margin-left: 300px; 
margin-right:50px; 
margin-top: 40px; 
border-radius: 5px; 
border-style: solid; 
float:left; 
} 
#sec2 { 
background-color: #75c776; 
width: 400px; 
height: 550px; 
margin-top: 40px; 
border-radius: 5px; 
border-style: solid; 
float:left; 
}