Help with image gallery layout

I need help in centering my image gallery, i cant make it to work how i want, gutters are being pain in the ass and so are calculating margins and widths. I want images centered, so three images per row, with one image being all the way to the left, second image being centered and third image being all the way to the right, using margins and padding with floats individualy i believe is a bad practice, there has to be a better way to do this. Each image is 295px width i changed their width’s in photoshop. I dont wish to use css grid, flexbox etc… i just want to do it in basic way with floats and box model. If thee is any good way to center these images with some space in between them.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ismar Photography site</title>
<link href="CSS/style.css" type="text/css" rel="stylesheet">
</head>
<body>
	
	<div id="wrapper">
		
		<header id="header">
			<h1>ISMAR PHOTOGRAPHY</h1>
			<nav id="navbar">
				<a href="#">HOME</a>
				<a href="#">ABOUT</a>
				<a href="#">SERVICES</a>
				<a href="#">CONTACT</a>
				<a href="#">PORTFOLIO</a>
			</nav>
		</header>
		
		<main>
			
			<p id="about-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil error aspernatur vitae illo animi aliquam perferendis dicta, temporibus, dolores suscipit accusantium cumque voluptas nesciunt pariatur numquam omnis quo sunt minus voluptatum vero odio ipsam mollitia. Itaque consequatur non harum molestias quibusdam voluptatem provident, eius, aliquam magnam, nesciunt ipsum est maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed beatae veritatis provident expedita facere dolore saepe autem cupiditate voluptas assumenda enim odit illum et placeat amet officiis, accusamus adipisci veniam, hic. Velit fugiat vitae, laboriosam omnis voluptates rem, totam esse quisquam sunt hic voluptatum amet quam repudiandae sequi incidunt nam!</p>
			
			<p id="page">01</p>
			
			<div id="inner-content">
				
					<ul id="block1">
						<li><img src="Images/nature.jpg"></li>
						<li><img src="Images/panorama.jpg"></li>
						<li><img src="Images/self.jpg"></li>
					</ul>
		
				
					<ul id="block2">
						<li><img src="Images/self2.jpg"></li>
						<li><img src="Images/sky.jpg"></li>
						<li><img src="Images/telex.jpg"></li>
					</ul>
				
					<ul id="block3">
						<li><img src="Images/urban-beatz.jpg"></li>
						<li><img src="Images/urban-beatz2.jpg"></li>
						<li><img src="Images/view.jpg"></li>
					</ul>
			</div>
			
			
		</main>
		
		<footer>
			<div id="contact">
				<h2>CONTACT ME</h2>
				<p>randomemail@gmail.com</p>
				<p>+456 34 55 5567</p>
			</div>
			
			
			<form action="#" name="form" id="form">
				<label for="name">Name</label><br>
				<input type="text" id="name"><br>
				<label for="last-name">Last name</label><br>
				<input type="text" id="last-name"><br>
				<label for="email">Email</label><br>
				<input type="text" id="email"><br>
				<label for="message">Message</label><br>
				<input type="text" id="message"><br>
			</form> 
		</footer>
	</div>
</body>
</html>

/* CSS Document */

/*body {
	margin: 20px 250px;
}*/

#wrapper {
	width: 1000px;
	margin: 20px auto;
}

header {
	background-image: url("../Images/view2.jpg");
	background-repeat: no-repeat;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 20px;
}
	
header #navbar {
	margin-top: 35px;
}

#navbar a {
	padding: 30px 35px;
}

header h1 {
	margin: 0;
}

main {
	background: rgba(211,204,38,1.00);
	overflow: hidden;
	padding: 20px;
}

main #page {
	text-align: center;
}


main #inner-content ul {
	list-style: none;
}

main #inner-content {
	overflow: hidden;
	padding-left: 17.7px;
}
	


main #inner-content #block1 {
	float: left;
	padding: 0;
	width: 33.33%;
	
}

main #inner-content #block2 {
	float: left;
	padding: 0;
	width: 33.33%;
}

main #inner-content #block3 {
	float: left;
	padding: 0;
	width: 33.33%;
}


main #inner-content #block1 li {
	margin-left: 12.5px;
}

main #inner-content #block2 li {
	margin-left: 12.5px;
	
}

main #inner-content #block3 li {
	margin-left: 12.5px;
}





#about-text {
	margin-bottom: 50px;
	text-align: center;
}



footer {
	background: rgba(96,96,96,1.00);
	padding: 20px;
	overflow: hidden;
	clear: left;
}

footer #contact {
	float: left;
	margin-left: 200px;
}

footer #form {
	float: right;
	margin-right: 200px;
}

This is how site looks currently:

Im doing a task and im not allowed to use those three unfortunately, i know those three are made for this. But they want me to use floats and box model. I can easly just center images all toghether with text-align center but they dont show up correctly due to different heights.

Something like that yes and middle images to be centered.

Ok i just did but can you tell me if this is correct way to do it?

main #inner-content {
	overflow: hidden;
}
	


main #inner-content #block1 {
	background: red;
	float: left;
	width: 33.33%;
	padding: 0;
}

main #inner-content #block2 {
	background: green;
	float: left;
	width: 33.33%;
	padding: 0;
}

main #inner-content #block3 {
	background: orange;
	float: left;
	width: 33.33%;
	padding: 0;
}

main #inner-content .image-block li {
	 margin-left: 12.5px;
}

image-block class is added to ul’s that also have block1, block2 and block3 id’s.
background colors of images unordered lists were used to better determine how to substract width of images (width’s are 295px) and width of ul’s (who’s width is 320px or 33.33% of parent container) to get amount of gap i have on right and to divide that gap by two and just add margin to the left of list’s to even it out. Would you say this is valid way to make something like this? Or do you believe there are more clean ways to do it?
Here’s the image of how it looks