Random space being added inside gallery. It's not padding? - html

Question

Working on this gallery I can't figure out why it is adding the extra space on the right side on the inside of the gallery. The blue border is just there to show the gallery window and will eventually be taken away. This is all I have in the gallery css.
.gallery {
display: -ms-flexbox;
display: flex;
justify-content: space-between;
-webkit-justify-content: space-around;
-ms-flex-pack: justify;
margin: 0 auto;
border: 2px solid blue;
}
Fiddle: https://jsfiddle.net/3crrxdax/5/ Thanks.
* {
box-sizing: border-box;
font-family: Georgia, Arial, sans-serif;
}
html {
background-color: #FFFF20;
}
body {
background-color: #FFFF20;
height: 100%;
}
#wrapper {
width: 1500px;
height: 100%;
margin: auto;
background-color: #233237;
color: #FFFF20;
box-shadow: 5px 5px 5px #000000;
}
header {
color: #FFFF20;
font: Georgia, serif;
text-align: center;
}
h1 {
background-image: url(ebaylogo.png);
background-repeat: no-repeat;
background-position: right;
height: 72px;
background-size: 120px;
line-height: 200%;
margin-bottom: 0;
}
h3 {
text-align: center;
padding-top: 50px;
padding-bottom: 5px;
}
h3,
.smallp {
margin: 0;
}
nav {
text-align: center;
font-weight: bold;
}
nav a {
text-decoration: none;
color: #FFFF20;
}
nav ul li {
list-style-type: none;
display: inline;
margin-right: 30px;
padding: 2px;
border: 2px solid #FFFF20;
}
footer {
padding-top: 50px;
font-size: .70em;
font-style: italic;
text-align: center;
color: #FFFF20;
margin: auto;
text-align: center;
}
footer a {
color: #FFFF20;
}
main {
padding: 0px 20px 0px 20px;
display: block;
}
.unorderedlist {
display: flex;
display: -ms-flexbox;
flex-wrap: wrap;
-ms-flex-pack: justify;
border: 1px blue solid;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-flow: row wrap;
padding-left: 0px;
list-style-type: none;
margin: 100px auto;
width: 60%;
height: 100%;
text-align: center;
}
.list {
padding-bottom: 50px;
background-color: #18121E;
width: 220px;
height: 375px;
box-shadow: 5px 5px 5px;
margin-bottom: 25px;
}
.list a {
text-decoration: none;
color: #FFFF20;
}
.smallp {
color: #FFFF20;
width: 300px;
}
.smallp2 {
width: 300px;
}
.secondh3 {
text-align: center;
margin-bottom: -15px;
}
.pawnstarimg {
margin-top: 50px;
border: 2px solid #FFFF20;
}
.peaceimg {
border: 2px solid #FFFF20;
order: 4;
-ms-flex-order: 4;
}
.malebox a {
color: #FFFF20;
}
.femalebox a {
color: #FFFF20;
}
a:hover {
color: #0000FF;
}
/** a:visited{
color:#000000;
Able to check a:hover without clearing cache
}**/
a:active {
color: #00FF00;
}
.test {
display: flex;
display: -ms-flexbox;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-flow: row wrap;
width: 60%;
margin: auto;
justify-content: space-around;
-ms-flex-pack: justify;
}
.testbox2 {
display: flex;
display: -ms-flexbox;
flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
}
.testbox3 {
display: flex;
display: -ms-flexbox;
flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
}
.gallery {
display: -ms-flexbox;
display: flex;
justify-content: space-between;
-webkit-justify-content: space-around;
-ms-flex-pack: justify;
margin: 0 auto;
border: 2px solid blue;
}
.gallery>div {
padding: 5px;
}
.gallery>div>img {
display: block;
transition: .3s transform;
}
.gallery>div:hover {
z-index: 1;
}
.gallery>div:hover>a>img {
transform: scale(2.5, 2.5);
transition: .2s transform;
}
.cf:before,
.cf:after {
display: table;
content: "";
line-height: 0;
}
<main id="wrapper">
<header>
<h1>CDC Shop</h1>
</header>
<nav>
<ul>
<li> Home</li>
<li> Shirts</li>
<li> Pants</li>
<li> Jackets</li>
<li> Shoes</li>
<li> Contact</li>
</ul>
</nav>
<div class="gallery">
<div>
<a href="angels.gif"><img src="angels.gif" height="150px" width="75px" />
</div>
<div>
<a href="angels2.jpg"><img src="angels2.jpg" height="150px" width="75px" />
</div>
</div>
<footer>
Copyright © 2017 CDCShop <br>
...#gmail.com
</footer>
</main>

Answer 1

Remove width: 1500px; and update to make it to good look
* { box-sizing: border-box;
font-family: Georgia, Arial, sans-serif;
}
html{
background-color:#FFFF20;
}
body{
background-color:#FFFF20;
height:100%;
}
#wrapper { //width: 1500px;
height:100%;
margin: auto;
background-color: #233237;
color: #FFFF20;
box-shadow: 5px 5px 5px #000000;
}
header{
color: #FFFF20;
font: Georgia, serif;
text-align: center;
}
h1{
background-image: url(ebaylogo.png);
background-repeat: no-repeat;
background-position: right;
height: 72px;
background-size: 120px;
line-height: 200%;
margin-bottom: 0;
}
h3{
text-align:center;
padding-top:50px;
padding-bottom:5px;
}
h3, .smallp{
margin:0;
}
nav{
text-align: center;
font-weight: bold;
}
nav a{
text-decoration: none;
color:#FFFF20;
}
nav ul li {
list-style-type: none;
margin: 10px 11px;
padding: 2px;
border: 2px solid #FFFF20;
width: fit-content;
float: left;
}
footer{
padding-top: 50px;
font-size: .70em;
font-style: italic;
text-align: center;
color: #FFFF20;
margin:auto;
text-align:center;
}
footer a{
color: #FFFF20;
}
main{
padding: 0px 20px 0px 20px;
display: block;
}
.unorderedlist{
display: flex;
display:-ms-flexbox;
flex-wrap:wrap;
-ms-flex-pack: justify;
border: 1px blue solid;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-flow: row wrap;
padding-left:0px;
list-style-type: none;
margin: 100px auto;
width:60%;
height:100%;
text-align:center;
}
.list{
padding-bottom: 50px;
background-color: #18121E;
width:220px;
height:375px;
box-shadow: 5px 5px 5px;
margin-bottom:25px;
}
.list a{
text-decoration:none;
color:#FFFF20;
}
.smallp{
color: #FFFF20;
width:300px;
}
.smallp2{
width:300px;
}
.secondh3{
text-align:center;
margin-bottom:-15px;
}
.pawnstarimg{
margin-top:50px;
border: 2px solid #FFFF20;
}
.peaceimg{
border: 2px solid #FFFF20;
order:4;
-ms-flex-order: 4;
}
.malebox a {
color:#FFFF20;
}
.femalebox a {
color:#FFFF20;
}
a:hover{
color: #0000FF;
}
/** a:visited{
color:#000000;
Able to check a:hover without clearing cache
}**/
a:active {
color: #00FF00;
}
.test{
display:flex;
display:-ms-flexbox;
flex-wrap:wrap;
-webkit-flex-wrap: wrap;
-ms-flex-flow: row wrap;
width:60%;
margin:auto;
justify-content:space-around;
-ms-flex-pack: justify;
}
.testbox2{
display:flex;
display:-ms-flexbox;
flex-direction:column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
}
.testbox3{
display:flex;
display:-ms-flexbox;
flex-direction:column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
}
.gallery {
display:-ms-flexbox;
display:flex;
justify-content:space-between;
-webkit-justify-content: space-around;
-ms-flex-pack: justify;
margin:0 auto;
border:2px solid blue;
clear: both;
}
.gallery > div {
padding:5px;
}
.gallery > div > img {
display: block;
transition: .3s transform;
}
.gallery > div:hover {
z-index: 1;
}
.gallery > div:hover > a > img {
transform: scale(2.5,2.5);
transition: .2s transform;
}
.cf:before, .cf:after {
display: table;
content: "";
line-height: 0;
}
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CDC Shop</title>
<link rel="stylesheet" type="text/css" href="../test3.css">
</head>
<body>
<main id="wrapper">
<header>
<h1>CDC Shop</h1>
</header>
<nav>
<ul>
<li> Home</li>
<li> Shirts</li>
<li> Pants</li>
<li> Jackets</li>
<li> Shoes</li>
<li> Contact</li>
</ul>
</nav>
<div class="gallery">
<div>
<img src="https://i.stack.imgur.com/m8iXH.jpg?s=328&g=1" height="150px" width="75px" />
</div>
<div>
<img src="https://i.stack.imgur.com/m8iXH.jpg?s=328&g=1" height="150px" width="75px" />
</div>
</div>
<footer>
Copyright © 2017 CDCShop <br>
ccoburn713#gmail.com
</footer>
</main>
</body>
</html>