Thank you to everyone for all the help! I have learned so much from your continuous support.
I am working on creating a 4-way vertical "collage" of images with no spaces between each picture, that is fully responsive when resizing the window. However, I am struggling to eliminate the space between each photo.
Another issue arises when I resize the window smaller, causing the images to move away from the lion image above and create more white space or padding without aligning with the lion image. The images also start overlapping the lion image when resizing to a larger size.
.image {
background-image: url(https://s-media-cache-ak0.pinimg.com/originals/31/91/d7/3191d75f03ba7d4c570358870c855ed7.jpg);
background-repeat: no-repeat;
height: 850px;
background-size: 100%;
}
#collage {
width: 90%;
}<div class="image">
<ul id="nav">
<li id="brand"><a href="#">MINIMAL</a></li>
<li id="navm"><a href="#">Men</a></li>
<li id="navm"><a href="#">Women</a></li>
<li id="navm"><a href="#">Contact</a></li>
</ul>
<h1>Simplicity is Minimal</h1>
<div id="home">
<a href="#" id="homeb">Shop Now</a>
</div>
</div>
<div class="row">
<div class="col-md-3" align="center">
<img id="collage" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Panthera_tiger_in_a_marshy_area_in_captivity.jpg">
</div>
<div class="col-md-3" align="center">
<img id="collage" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Panthera_tiger_in_a_marshy_area_in_captivity.jpg">
</div>
<div class="col-md-3" align="center">
<img id="collage" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Panthera_tiger_in_a_marshy_area_in_captivity.jpg">
</div>
<div class="col-md-3" align="center">
<img id="collage" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Panthera_tiger_in_a_marshy_area_in_captivity.jpg">
</div>
</div>