marginが若干ずれてしまいます

ブレイクポイントmax-width: 999px;からのレイアウトのときに、
.size_2x2のサイズが若干ずれているように見えるのですが
（.size_2x2の下のmarginが若干広くて、.size_1x1と.size_2x1の下が狭く見えます）
どこをいじれば均一なレイアウトにできるのでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>content-panel</title>
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<link rel="stylesheet" href="css/style.css">
8</head>
9<body>
10
11<div id="container">
12
13<div id="content">
14
15<div id="panel">
16
17<ul>
18<li class="size_2x2"><a href="#"></a></li>
19<li class="size_2x1"><a href="#"></a></li>
20<li class="size_1x1"><a href="#"></a></li>
21<li class="size_1x1"><a href="#"></a></li>
22<li class="size_2x1"><a href="#"></a></li>
23<li class="size_1x1"><a href="#"></a></li>
24<li class="size_1x1"><a href="#"></a></li>
25<li class="size_1x1"><a href="#"></a></li>
26<li class="size_1x1"><a href="#"></a></li>
27<li class="size_1x1"><a href="#"></a></li>
28<li class="sp size_1x1"><a href="#"></a></li>
29</ul>
30
31</div><!-- /#panel -->
32
33</div><!-- /#content -->
34
35</div><!-- /#container -->
36
37</body>
38</html>

CSS
1/* reset */
2html, body, h1, h2, h3, h4, p, ul, ol, li, table, tr, td, dl, dt, dd {
3margin: 0;
4padding:0;
5line-height: 1.0;
6font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
7}
8
9a { text-decoration: none; }
10ul, li { list-style: none; }
11img { vertical-align: bottom; }
12
13
14/* container */
15#container {
16margin: 0 auto;
17width: 1000px;
18}
19
20
21/* panel */
22.sp { display: none;}
23
24#panel ul {
25overflow: hidden;
26width: 1000px;
27}
28
29#panel ul li {
30float: left;
31border: 1px solid #dcdcdc;
32box-sizing: border-box;
33}
34
35.size_1x1 {
36margin: 10px;
37width: 180px;
38height: 180px;
39background-color: lime;
40}
41
42.size_2x1 {
43margin: 10px;
44width: 380px;
45height: 180px;
46background-color: cyan;
47}
48
49.size_2x2 {
50margin: 10px;
51width: 380px;
52height: 380px;
53background-color: magenta;
54}
55
56
57@media screen and (max-width:999px){
58
59/* container */
60#container {
61width: 100%;
62}
63
64#panel ul {
65width: 100%;
66}
67
68.size_1x1 {
69margin: 1%;
70padding-bottom: 18%;
71width: 18%;
72height: 0;
73}
74
75.size_2x1 {
76margin: 1%;
77padding-bottom: 18%;
78width: 38%;
79height: 0;
80}
81
82.size_2x2 {
83margin: 1%;
84padding-bottom: 38%;
85width: 38%;
86height: 0;
87}
88
89}
90
91@media screen and (max-width:639px){
92
93/* panel */
94.sp { display: block;}
95
96.size_1x1 {
97padding-bottom: 48%;
98width: 48%;
99}
100
101.size_2x1, .size_2x2 {
102margin: 1%;
103padding-bottom: 48%;
104width: 98%;
105height: 0;
106}
107
108}