Hi there, i just started learning to code. I have a challenge to do, can you please review my code and point me out my errors, i’m eager to learn!
Problems: 1. Can’t position the transparency box behind all the body and header, i want to see more clearly my texts and bars.
2. Would like to align the checkboxes with the text.
////—////
My html page
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>The cat solution</title>
<link rel="stylesheet" href="style44.css">
</head>
<!-- Logo -->
<header class="logo">
<img src="https://cdn.pixabay.com/photo/2018/05/09/19/31/cat-3385968_960_720.png" alt="" width="200px" height="200px">
<!-- Main title -->
<h1>Taking cats from A to B</h1>
<div class="rectangleshadow">
</div>
</header>
<div class="container">
<body>
<div class="rectangleshadow">
</div>
<!-- Users choiche -->
<nav class="shape1">
<button type="button" name="button">Reservation</button>
<button type="button" name="button">End reservation</button>
<button type="button" name="button">Lights on</button>
</nav>
<!-- Users -->
<main>
<!-- User 1 -->
<div>
<input type="checkbox">
<span class="bikes">Bike 1</span>
</div>
<div>
<span>»</span> <span class="addresses">Pemberton Street - 280 meters from your position</span>
</div>
<div>
<span class="statustext">Charge state:</span>
<div class="charge1"></div>
</div>
<br><br>
<!-- User 2 -->
<div>
<input type="checkbox">
<span class="bikes">Bike2</span>
</div>
<div>
<span>»</span> <span class="addresses">New York Street - 200 meters from your position</span>
</div>
<div>
<span class="statustext">Charge state:</span>
<div class="charge2"></div>
</div>
<br><br>
<!-- Users 3 -->
<div>
<input type="checkbox">
<span class="bikes">Bike3</span>
</div>
<div>
<span>»</span> <span class="addresses">Glasgow Street - 350 meters from your position</span>
</div>
<div>
<span class="statustext">Charge state:</span>
<div class="charge3"></div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
my CSS stylesheet
header {
text-align: center;
width: 1000px;
margin:auto;
padding-top: 60px;
padding-bottom: 1px;
height: 180px;
background:#000000;
border: 1px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
opacity: 0.7 ;
position: relative;
z-index: 8;
}
/* Background */
body {
background-image: url(https://uhdwallpapers.org/uploads/converted/19/08/03/huawei-mediapad-m6-stock-wallpaper-1920x1200_666874-mm-90.jpg);
color: white;
}
.container {
background-clip:border-box;
margin:auto;
padding-top: 20px;
padding-bottom: 20px;
width: 1000px;
height: 500px;
background:#000000;
border: 1px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
opacity: 0.7 ;
position: relative;
z-index: 8;
}
/* logo */
.logo {
text-align: center;
margin-top: 70px;
padding-bottom: 100px;
}
/* Main title */
h1 {
color: #00FF00;
font-family: fantasy;
text-align: center;
}
/* Nav bars */
nav {
text-align:center;
margin-top: -17px;
margin-bottom: 20px;
}
.shape1 {
padding-top: 10px;
padding-bottom: 8px;
width: 800px;
height: 25px;
background: #00dd00;
border: 1px;
margin-left: 100px;
}
/* Main */
div {
text-align: left;
margin-left: 100px;
}
/* Clients bikes */
.bikes {
font-size: 23px;
font-family: fantasy;
font-weight: bold;
}
.addresses {
font-family: sans-serif;
font-size: 15px;
font-weight: bold;
}
/* charge status text */
.statustext {
font-family: sans-serif;
font-size: 15px;
font-weight: bold;
}
/* Visual bar charges */
.charge1 {
padding-top: 10px;
padding-bottom: 10px;
width: 350px;
height: 10px;
background: #FFC300;
border: 1px;
border-radius: 5px;
margin-top: 3px;
margin-left: -2px;
}
.charge2 {
padding-top: 10px;
padding-bottom: 10px;
width: 600px;
height: 10px;
background: #52C72E;
border: 1px;
border-radius: 5px;
margin-top: 3px;
margin-left: -2px;
}
.charge3 {
padding-top: 10px;
padding-bottom: 10px;
width: 150px;
height: 10px;
background: #FF0000;
border: 1px;
border-radius: 5px;
margin-top: 3px;
margin-left: -2px;
}
This should be the output, but i’m sure i have written too much code! 
