okay i need more soundcloud look, with one column/wrapper (column/wrapper with content with few sections with different colors: header, audioplayer, about us, footer etc), on the left and right side are grey background. change my current code, index.ejs and css. here is my code:
index.ejs:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>My SoundCloud</title>
	<script src="/jquery/dist/jquery.min.js"></script>
	<script src="/jquery-ui/dist/jquery-ui.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="/css/main.css" rel="stylesheet">
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
	<link href="/jquery-ui/themes/base/all.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header class="header">
		<div class="container">
			<div class="header-left">
				<a href="/" class="logo"><i class="fa fa-soundcloud"></i> My SoundCloud</a>
			</div>
			<div class="header-right">
				<ul class="nav">
					<li class="nav-item"><a href="/register" class="nav-link">Register</a></li>
					<li class="nav-item"><a href="/login" class="nav-link">Login</a></li>
					<li class="nav-item"><a href="/logout" class="nav-link">Logout</a></li>
				</ul>
			</div>
		</div>
	</header>
	<div class="container-fluid">
		<main class="main">
			<section class="section section-search" id="find-musicians">
				<div class="container">
					<h2 class="section-title"><i class="fa fa-search" aria-hidden="true"></i> Find Musicians</h2>
					<form class="form-search" action="/search" method="get">
						<div class="form-group">
							<label for="role"><i class="fa fa-users" aria-hidden="true"></i> Role:</label> 
							<select class="form-control" id="role" name="role">
								<option value="">All</option>
								<option value="Band">Band</option>
								<option value="Artist">Artist</option>
							</select>
						</div>

						<div class="form-group">
						  <label for="genre">Search by genre:</label>
						  <select class="form-control" id="genre" name="genre">
						    <option value="">All</option>
						  </select>
						</div>
						<div class="form-group">
							<label for="city"><i class="fa fa-map-marker" aria-hidden="true"></i> Location:</label> 
							<input id="city" name="city" type="text" class="form-control" autocomplete="on" value="<%= city %>" data-value="">
						</div>
						<button class="btn btn-primary" type="submit"><i class="fa fa-search" aria-hidden="true"></i> Search</button>
					</form>
				</div>
			</section>

			<section class="section section-audio-player">
				<div class="container">
					<h2 class="section-title">Listen to Our Music</h2>
					<div class="audio-player">
						<h1 class="nowplaying">Now playing</h1>
						<div class="audio-tracklist">
							<% tracks.forEach((track, index) => { %>
								<div class="audio-track">
									<audio id="audio-<%= index %>" src="/tracks/<%= track.filename %>"></audio>
									<div class="audio-track-image" onclick="togglePlay(<%= index %>)">
										<img src="/img/<%= track.image_filename || 'default-track-image.png' %>" alt="<%= track.title %>">
									</div>
									<h4><%= track.title %></h4>
								</div>
							<% }); %>
						</div>
						<div class="audio-player-controls">
							<button class="audio-player-button" onclick="togglePlay()">
								<i class="audio-player-icon fa fa-play"></i>
							</button>
							<div class="audio-player-progress">
								<input type="range" class="progress-bar" value="0" onchange="setProgress(this.value)">
								<span class="progress-time" id="progress-time">0:00</span>
							</div>
						</div>
					</div>
				</div>
			</section>
		</main>
	</div>

css:

.section {
	padding: 50px 0;
	margin-bottom: 4rem;
}

.section-title {
	
	font-size: 35px;
	font-weight: 700;
	margin-bottom: 50px;
	text-align: center;
	text-transform: uppercase;
}

.form-search {
	
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.form-search .form-group {
	margin: 10px;
}

.form-search label {
	font-size: 18px;
	font-weight: 500;
	margin-right: 10px;
}

.form-search input[type="text"],
.form-search select {
	border: none;
	border-radius: 0;
	border-bottom: 2px solid #ccc;
	padding: 10px;
	font-size: 16px;
	font-weight: 400;
	width: 200px;
	margin-right: 10px;
}

.form-search button {
	background-color: #ff5500;
	border: none;
	border-radius: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	padding: 10px 20px;
	text-transform: uppercase;
	transition: background-color 0.3s ease-in-out;
}

.form-search button:hover {
	background-color: #d44c00;
	
}

.audio-player {
	background-color: #f3f3f3;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	padding: 20px;
	text-align: center;
}

.audio-tracklist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.audio-track {
	margin: 10px;
	text-align: center;
}

.audio-track-image {
	border-radius: 5px;
	cursor: pointer;
	height: 200px;
	overflow: hidden;
	width: 200px;
}

.audio-track-image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.audio-track h4 {
	font-size: 18px;
	font-weight: 500;
	margin-top: 10px;
	text-align: center;
}

.audio-player-controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 20px;
}

.audio-player-button {
	background-color: #ff5500;
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 32px;
	padding: 20px;
	margin: 0 10px;
	transition: background-color 0.3s ease-in-out;
}

.audio-player-button:hover {
	background-color: #d44c00;
}

.audio-player-icon {
	margin-left: 3px;
}

.audio-player-progress {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0 10px;
	width: 100%;
}

.progress-bar {
	cursor: pointer;
	flex: 1;
	height: 5px;
	margin: 0 10px;
	outline: none;
	-webkit-appearance: none;
	background-color: #ccc;
}

.progress-bar::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #ff5500;
	cursor: pointer;
}

.progress-time {
	font-size: 16px;
	font-weight: 500;
	margin: 0 10px;
}

/* Header */
.header {
background-color: #FF5500;
color: #fff;
font-size: 1.2rem;
padding: .5rem 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}

.header .container {
display: flex;
justify-content: space-between;
align-items: center;
}

.header .logo {
color: #fff;
font-weight: bold;
font-size: 1.5rem;
text-decoration: none;
}

.header-right {
display: flex;
align-items: center;
}

.nav {
list-style: none;
margin: 0;
padding: 0;
}

.nav-item {
margin-right: 1rem;
}

.nav-link {
color: #fff;
text-decoration: none;
font-weight: bold;
}

.nav-link:hover {
color: #fff;
text-decoration: underline;
}

.main {
	margin-top: 130px; /* увеличиваем отступ сверху до 130px */
	
	background-color: #f3f3f3;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	padding: 20px;
	text-align: center;
}