I need help with my HTML webpage. I need help making the "FILTER BY:" section fixed to the left side of the screen while the main section with the smartphones and the images are in the middle or to the right of the fitler section. Please help.

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

height: 100vh;

display: flex;

flex-direction: column;

}

header {

background-color: #333;

color: #fff;

padding: 10px;

text-align: center;

border-radius: 10px;

align-items: center; /* new */

}

section {

flex: 1; /* new */

border: 5px solid #ddd;

padding: 20px;

margin-left: 250px;

}

h1 {

font-size: 2.5rem;

margin: 0;

}

nav {

display: flex;

justify-content: space-around;

padding: 10px;

}

nav a {

background-color: #8BC34A;

color: #fff;

font-size: 1.2rem;

margin-right: 10px;

text-decoration: none;

padding: 10px 20px;

border-radius: 20px;

transition: background-color 0.3s ease;

}

nav a:hover {

background-color: #558B2F;

}

main {

display: flex;

flex-wrap: wrap;

padding: 20px;

}

.product {

background-color: #fff;

border-radius: 10px;

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

margin: 10px;

max-width: 300px;

padding: 20px;

text-align: center;

}

.product img {

max-width: 100%;

margin-bottom: 10px;

}

.product h2 {

font-size: 1.5rem;

margin: 0;

}

.product p {

margin: 0;

}

.filter {

position: fixed;

left: 0;

top: 50%;

transform: translateY(-50%);

width: 200px;

background-color: #f2f2f2;

padding: 10px;

border-radius: 10px;

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

overflow-y: scroll;

height: 80%;

}

.filter label {

display: block;

font-size: 1rem;

font-weight: bold;

margin-bottom: 5px;

}

.filter input[type="checkbox"] {

display: block;

margin-bottom: 10px;

padding: 5px;

width: 100%;

border: none;

border-radius: 5px;

}

.section p {

margin: 0;

}

Smartphone Shop

Home

Phones

Tablets

Accessories

Welcome to our smartphone shop!.

Neo G4

Fast, reliable

Buy

alt="..." />

Omega 7

Derived from the greatest smartphone builders

Buy

class="card-img-top" alt="..." />

Fold X4

Two screens. Double the power. Made by XTier.

Buy

FILTER BY:

Size

Small

Medium

checked />

Large