Gap in-between image grid

Question

* {
  margin: 0 auto;
} 

.photos {
 	padding: 5%;
 	background-color: #27ae60;
 	box-sizing: content-box;
 }

 .photos > .photos-wrapper {
 	width: 100%;
 	text-align: center;
 	align-content: center;
 	overflow: hidden;
 }

 .photos > .photos-wrapper > .photo-1 {
 	width: 50%;
 	float: left;
 	display: inline-block;
 	margin: 0;
 }

.photos > .photos-wrapper > .photo-1 > img {
 	width: 100%;
 	margin: 0%;
 }

 .photos > .photos-wrapper > a > button {
 	border: none;
 	background-color: black;
 	text-transform: uppercase;
 	font-weight: 800;
 	letter-spacing: 5px;
 	border-radius: 5px;
 	color: white;
 	margin: 2% 2%;
 	cursor: auto;
 	padding: 2% 6%;
 }

<div class="photos">
	<div class="photos-wrapper wrapper">
		<div class="photo-1">
			<img src="https://s-media-cache-ak0.pinimg.com/originals/2c/57/83/2c57831c6f450a30dc21bd4353b3107a.jpg" alt="Mountain Photography"> 
		</div>

		<div class="photo-1">
			<img src="https://i.vimeocdn.com/video/376212686_1280.jpg"> 
		</div>
		<div class="photo-1">
			<img src="http://www.airpixa.co.uk/images/architectural-photography-london-skyline.jpg?crc=4158542412" alt="Mountain Photography"> 
		</div>

		<div class="photo-1">
			<img src="http://www.larissajoice.co.uk/wp-content/uploads/2016/11/M-Shed-Wedding-Photography-Bristol_0212.jpg" alt="Mountain Photography"> 
		</div>

		<div class="photo-1">
			<img src="https://i.ytimg.com/vi/XdYEzui3Ttc/maxresdefault.jpg" alt="Mountain Photography"> 
		</div>

		<div class="photo-1">
			<img src="https://nhd.usgs.gov/photos/08_Hells_Canyon.jpg" alt="Mountain Photography"> 
		</div>

	</div> 
</div>

http://codepen.io/anon/pen/BWQJgO

As seen here, I'm trying to make an image grid, but there is a gap between the row of images which I'd like to get rid of. Any help would be appreciated! :)

Answer 1

Try adding this style: .photos img { display: block; }

See this codepen