I am trying to create an image gallery but the images are very far apart
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
article {
width: 600px;
float: right;
padding-right: 100px;
font-size: 20px;
line-height: 2;
padding-top: 100px;
}
main{
padding-left: 70px;
padding-bottom: 50px;
padding-top: 50px;
}
header{
font-size: 35px;
padding-bottom: 30px;
padding-top: 30px;
}
header1{
font-size: 60px;
padding-left: 70px;
padding-top: 30px;
}
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}
.column img {
margin-top: 12px;
}
</style>
</head>
<header1><center>Lauren Miller</center></header1>
<ul>
<li><a href="graphic design.html">Graphic Design</a></li>
<li><a class="active" href="index.html">About Me</a></li>
<li><a href="art.html">Art</a></li>
</ul>
<div class="row">
<div class="column">
<main2><img src="links/gd.jpg" width="450px" style="width:450px" height="250px" alt=""/></main2></div>
<div class="column"><main><img src="links/bennyposter.jpg" width="450px" height="250px" alt=""/></main></div>
<div class="column"><main3><img src="links/cheer_dance.jpg" width="450px" height="250px" alt=""/></main3></div></div>
<div class="row">
<div class="column"><img src="links/gd3.jpeg" width="400px" height="auto" alt=""/></div>
<div class="column"><img src="links/gd4.jpeg" width="400px" height="auto" alt=""/></div>
<div class="column"><img src="links/gd5.jpg" width="400px" height="auto" alt=""/></div>
</div>
<body>
</body>
</html>
STYLE CSS:
@charset "UTF-8";
div {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
width: 1420px;
background-color: #F3F3F3;
height: 1420px;
padding-top: 0px;
}
ul {
list-style-type: none;
margin-bottom: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: flex;
justify-content: center;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}