I am having an issue with the alignment of the section on my website. How can I center align it horizontally for both mobile and desktop views? I attempted to use the center-align block elements by setting the left and right margins to auto, but that did not work. Here is how the website looks: https://i.sstatic.net/LyX1d.jpg - On desktop
For smaller screens: https://i.sstatic.net/ONtbo.jpg
Below are the index.html and CSS code snippets:
<!DOCTYPE html>
<html lang="en">
<head>
... (head content)
</head>
<body>
... (navbar content)
... (search input and dropdown select filter)
<section class="products">
... (product cards content)
</section>
<script src="sort.js"></script>
</body>
</html>
/*CSS Reset Styles*/
html, body {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/*Main Styles*/
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500");
body {
margin: 0 auto;
width: 90%;
max-width: 1240px;
font-family: "Roboto", sans-serif;
background-color: #f6f6f6;
}
/*Typography Styles*/
h1 {
font-size: 28px;
font-weight: 300;
flex: 1;
}
h5 {
font-weight: 500;
line-height: 1.7em;
}
h6 {
color: #666;
font-size: 14px;
}
/*Product Layout Styles*/
.product-filter {
display: flex;
padding: 30px 0;
}
... (more CSS styles)