html - HTML 段落の書式設定の問題

Question

だから私はこのhtmlの一部を持っています:

<div id="navigation">
    <img class="navLogo" src="images/navlogo.png" />
    <h3 class="navTalk">Routes and Maps</h3> <br />
    <p class="navtext">Get routes, stop times,and maps</p>
</div>
<div id="fares">
    <img class="navLogo" src="#" />
    <h3 class="navTalk">Fares & Costs</h3>
    <p>Get info on fares and trip costs</p>
</div>
<div id="alerts">
    <img class="navLogo" src="#" />
    <h3 class="navTalk">Service Alerts</h3>
    <p>Find disruptions and delays</p>

</div>

この CSS では:

#navigation {
float: left;
border: 1px solid black;
background-color: #d69f0f;
margin-left: 50px;
padding: 2px;
margin-bottom: 10px;
width: 210px;

}
#fares {
float: left;
border: 1px solid black;
background-color: red;
margin-left: 50px;
padding: 2px;
margin-bottom: 10px;
width: 200px;
}
#alerts {
float: left;
border: 1px solid black;
background-color: red;
margin-left: 50px;
padding: 2px;
width: 200px;
}
#navigation h3 {
color: #fff;
}
#navigation p {
font-size: 8pt;
color: #fff;
padding-left: 4px;
}
#fares p {
font-size: 8pt;
color: #fff;
}
#fares h3 {
color: #fff;
}
#alerts p {
font-size: 8pt;
color: #fff;
}
#alerts h3 {
color: #fff;
}
#tripplanner {
float: left;
}

段落が h3 タグの下の行から始まっていないことを除いて、すべてが期待どおりに見えます。代わりに、段落は h3 の後に始まり、次の行に折り返されます。また、段落がパディングを受け入れることができないようで、使用しているアイコンの右側に押し付けられています。なぜこれが起こっているのか、私は完全に途方に暮れています。簡単な解決策があると確信していますが、迷っています。どんな助けでも大歓迎です。

Answer 1

BREAK タグを削除します。

<h3 class="navTalk">Routes and Maps</h3> <br /><---こちら。