HTML - Tło oraz ustawienie

pytanie zadane 7 lipca 2019 w HTML i CSS przez Nerez Użytkownik (970 p.)

Witam. W 1 linku obrazek z onedrive, a w drugim z mojej strony. Jak zrobić dokładnie tak samo jak w onedrive?

Moja: https://zapodaj.net/7b66b461d6e0b.png.html

OneDrive: https://zapodaj.net/ad52fb40c0c33.png.html

Te tło, niebieski pasek z boku, wyrównanie całości do lewej strony. Proszę o zmianę mojego kodu i podesłanie, rozumiem, że to mnie nic nie nauczy, ale potrzebuję to na szybko. Pozdrawiam.

Aktualne próby:

	</nav>
			<div>					
				<ul class="left-panel">
					<li>
						<a href="#">Pliki</a>
					</li>
					<li>
						<a href="#">Ostatnie</a>
					</li>
					<li>
						<a href="#">Zdjęcia</a>
					</li>
					<li>
						<a href="#">Kosz</a>
					</li>
				</ul>
			</div>

CSS:

.left-panel {
	float: left;
	font-family: "Segoe UI Web Regular","Segoe UI Regular WestEuropean","Segoe UI",Tahoma,Arial,sans-serif;
		background-color: #fff;
		width: 120px;
		height: 100%;
		padding: 14px;
		font-size: 17px;
		border-right: #f7f1f1 3px solid;
		border-top: #f7f1f1 3px solid;
		justify-content: space-around;
		align-items: center;
		overflow-x: hidden;
		overflow-y: auto;
		font-weight: 400;
		text-decoration: none;
}

.left-panel a {
	text-decoration: none;
}
.left-panel li {
	list-style-type: none;
}

.left-panel :hover {
	background-color: #444;
	background-size: auto;
	border-left: #276DD0 1px solid;
	display: inline;
  }