Currently, as a novice in HTML and CSS, I am encountering image misalignment issues while attempting to make them uniform in size. How can this be rectified?
The existing HTML code is shown below:
<div class="container text-center">
<h3>Explore Universities</h3><br>
<div class="row">
<div id="cities">
<div class="col-sm-4">
<img src="https://media.timeout.com/images/100644443/image.jpg" class="img-responsive" style="width:100%" alt="London">
</div>
<div class="col-sm-4">
<img src="http://www.gaiasg.com/img/si1.jpg" class="img-responsive" style="width:100%" alt="Singapore">
</div>
<div class="col-sm-4">
<img src="http://images.trvl-media.com/media/content/shared/images/travelguides/Argentina-8-smalltabletRetina.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="http://www.travelstart.com.ng/blog/wp-content/uploads/2014/02/Lagos.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="https://www.sohohousechicago.com/system/files/082014/53e8a9c2f9426120f600002e/xlarge/063696_002.jpg?1424778295" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="http://www.tnetnoc.com/dealsImages/landingPages/destinationLandingPages/other/Sydney-345x225.1.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
</div>
</div>
In addition, the following CSS code snippet is being used:
#cities .col-md-3 {
height:570px;
overflow:hidden;
}