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: