Single <br /> doesn't create a line break instead, requires two <p>I am working on a Wordpress theme and have been using Bootstrap a bit. I put my article excerpt for the homepage in a well, <code>div class='well'</code>. I have edited the well to have straight corners and have changed the border colour. Except those, there aren't any changes. But, when I try to add a linebreak between categories and tags, it doesn't float to extreme left as in the image below. </p> <p>Q1. How to use a single <code>&lt;br /&gt;</code> to make a line break between the two? Q2. There's a lot of blank space in the well after the category and tags. How to remove it?</p> <p><strong>HTML Code</strong> </p> <pre><code>&lt;div class="categories"&gt;&lt;?php the_category(' '); ?&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;div class="tags"&gt;&lt;?php the_tags('',' '); ?&gt;&lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>.categories{float:left; margin-right:3px;margin-bottom: 1px;} .categories a { background: #00A1E0; color: #FFFFFF; display: inline-block; margin-bottom: 2px; margin-left: 0px; padding: 1px 7px; text-decoration: none; transition: all 0.3s ease 0s; } .categories a:hover{background: #666; color:#fff;} .tags{float:left; margin-right:1%;margin-bottom:4px;} .tags a { font-size:70%; background:#666666; color: #FFFFFF; display: inline-block; margin-bottom: 3px; margin-left: 0px; padding: 1px 7px; text-decoration: none; transition: all 0.3s ease 0s; } .tags a:hover{color:#FFFFFF;} </code></pre> <p><strong>When I use single <code>&lt;br /&gt;</code>, this is what happens</strong> <a href="http://i.stack.imgur.com/OIDYt.png" rel="nofollow">http://i.stack.imgur.com/OIDYt.png</a> (Sorry, can't post images due to lack of rep).</p>