flex-wrapで任意の段落数と余白をつける方法について何かヒントを頂きたいです。

前提・実現したいこと

インスタグラムAPIで取得した画像を、
下記の画像のように、
パソコンバージョン→縦2×横4
スマホバージョン→縦4×横2
のように配置し、余白をいれたいのですが、上下の余白は入るのに、左右の余白が入らず、質問させて戴きました。

該当のソースコード

HTML
1<div class="instacontainer">
2     <div id="instafeed" class="row"></div>
3</div>

↓検証ツールで出てくるHTML

HTML
1<div class="instacontainer">
2     <div id="instafeed" class="row">
3
4　　　　<div>
5　　　　　<a href="https://www.～～>
6　　　　　<img src="https://～～"></a>
7　　　　</div>
8　　　　　↑これが8個分あります
9　　　
10　　　</div>
11</div>

↓このようにしていると、余白の部分以外は、自分のやりたいとおりです。

CSS
1
2.instacontainer {
3  margin: auto;
4  max-width: 100%;
5}
6
7.instacontainer .row {
8  display: -webkit-box;
9  display: -ms-flexbox;
10  display: flex;
11  -ms-flex-wrap: wrap;
12      flex-wrap: wrap;
13　padding: 12.5%;
14　justify-content: center;
15}
16
17.instacontainer .row div {
18  max-width: 25%;
19}
20
21@media (max-width: 667px) {
22  .instacontainer .row div {
23    max-width: 50%;
24  }
25}
26
27.instacontainer .row div img {
28  width: 100%;
29}

試したこと

imgにpaddingを入れてみました

CSS
1.instacontainer .row div img {
2  width: 100%;
3  padding: 5%;
4}

→検証してみると、画像にpaddingは入りましたが、その肝心な余白は画像に重なり見えなくなっていました。

divのほうにpaddingを入れてみました。これでいける！と思いました。

CSS
1.instacontainer .row div {
2  max-width: 25%;
3  padding: 1px;
4}

→画像の間に1pxは入り、余白は出来たものの、今度は
このようになってしまいました…

.instacontainerのmax-widthに960px入れてみました

→変わらずでした…

補足情報

JS側で何か記載する部分があるとか…？じゃないですよね…

JS
1$(function(){
2	$.ajax({
3		type: 'GET',
4		url: 'https://graph.facebook.com/v3.0/～～?fields=name%2Cmedia.limit(8)～～',
5		dataType: 'json',
6		success: function(json) {
7		    	
8		    var html = '';
9		    var insta = json.media.data;
10		    for (var i = 0; i < insta.length; i++) {
11		    	html += '<div ><a href="' + insta[i].permalink + '" target="_blank"><img src="' + insta[i].media_url + '"></a></div>';
12		    }
13		      $("#instafeed").append(html);			
14		},
15		error: function() {
16		}
17	});
18});