Unable to separate 2 div rows - html

Question

I just started learning HTML and CSS, and am having trouble figuring our how to include a horizontal space to separate both rows, and fix the misalignment/sizing problem. Both rows are currently attached together, and when I remove <div class="row" style="padding-top: 50px">, the misalignment is fixed but the rows are still together.
Can any one help me out?
HTML:
<div id="featuredcities">
<div class="col-sm-3">
<img id="image" src="images/singapore.jpg" alt="singapore">
<p id="text">Singapore</p>
<p id="summarytext">Amazing culinary experience and <br>efficient business ecosystem in this <br>tiny cosmopolitan country.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/bangkok.jpg" alt="bangkok">
<p id="text">Bangkok</p>
<p id="summarytext">A bustling neon-lit city that combines tradition and modernity.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/shanghai.jpg" alt="shanghai">
<p id="text">Shanghai</p>
<p id="summarytext">Blend of East meets West <br>in this high energy metropolis.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/hcmc.jpg" alt="ho chi minh city">
<p id="text">HCMC</p>
<p id="summarytext">The "Paris of Asia", Ho Chi Minh City is <br>as much historical as it is modern.</p>
</div>
</div><!--End of 1st div row-->
<!--2nd div row-->
<div class="row" style="padding-top: 50px">
<div class="col-sm-3">
<img id="image" src="images/seoul.jpg" alt="seoul">
<p id="text">Seoul</p>
<p id="summarytext">Famous for pop culture, <br>vibrant shopping and <br>historical palaces.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/bangkok.jpg" alt="bangkok">
<p id="text">Bangkok</p>
<p id="summarytext">A bustling neon-lit city that combines tradition and modernity.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/shanghai.jpg" alt="shanghai">
<p id="text">Shanghai</p>
<p id="summarytext">Blend of East meets West <br>in this high energy metropolis.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/hcmc.jpg" alt="ho chi minh city">
<p id="text">HCMC</p>
<p id="summarytext">The "Paris of Asia", Ho Chi Minh City is <br>as much historical as it is modern.</p>
</div>
</div><!--End of 1st div row-->
</div><!--End of Community-->
</section>
CSS:
#images .col-md-3 {
height: 570px;
overflow: hidden;
}

Answer 1

You have this HTML for your first div
<div id="featuredcities">
Add the class row to it.
<div class="row" id="featuredcities">

Answer 2

<div class="row" id="featuredcities">
<div class="col-sm-3">
<img id="image" src="images/singapore.jpg" alt="singapore">
<p id="text">Singapore</p>
<p id="summarytext">Amazing culinary experience and <br>efficient business ecosystem in this <br>tiny cosmopolitan country.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/bangkok.jpg" alt="bangkok">
<p id="text">Bangkok</p>
<p id="summarytext">A bustling neon-lit city that combines tradition and modernity.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/shanghai.jpg" alt="shanghai">
<p id="text">Shanghai</p>
<p id="summarytext">Blend of East meets West <br>in this high energy metropolis.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/hcmc.jpg" alt="ho chi minh city">
<p id="text">HCMC</p>
<p id="summarytext">The "Paris of Asia", Ho Chi Minh City is <br>as much historical as it is modern.</p>
</div>
</div>
<!--End of 1st div row-->
<!--2nd div row-->
<div class="row" style="padding-top: 50px"> <!-- padding top is all you need -->
<div class="col-sm-3">
<img id="image" src="images/seoul.jpg" alt="seoul">
<p id="text">Seoul</p>
<p id="summarytext">Famous for pop culture, <br>vibrant shopping and <br>historical palaces.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/bangkok.jpg" alt="bangkok">
<p id="text">Bangkok</p>
<p id="summarytext">A bustling neon-lit city that combines tradition and modernity.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/shanghai.jpg" alt="shanghai">
<p id="text">Shanghai</p>
<p id="summarytext">Blend of East meets West <br>in this high energy metropolis.</p>
</div>
<div class="col-sm-3">
<img id="image" src="images/hcmc.jpg" alt="ho chi minh city">
<p id="text">HCMC</p>
<p id="summarytext">The "Paris of Asia", Ho Chi Minh City is <br>as much historical as it is modern.</p>
</div>
</div>
<!--End of 2st div row-->
always try to keep your code cleaner.. I recommend you you study really good bootstrap grid system Bootstrap-grid
edit:
Your images ID is "image" , and in your css you're calling "#images" ... ?

Answer 3

You could either change it from padding-top to margin-top, or you could also add in a tag in between the two divs.