I am beginning to learn CSS and Bootstrap 5. I have this code that doesn't display right.
HTML code:
body, html {
height: 100%;
}
body {
background-image: url('assets/images/expressway.jpg');
height: 100%;
background-color: #6cdb84;
background-blend-mode: darken;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#bg {
height: 100%;
width: 100%;
background-color: rgb(235, 240, 235);
clip-path: polygon(0 0, 100% 0, 100% 42%, 21% 100%, 0 100%, 0% 50%);
position: absolute;
z-index: -1;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TemplateUnmannedLcs</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div id="bg">
MY HEADER SECTION
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>Why is it that my div that has the id "bg" overshoots the container constraint. Isn't it that it should only go to the center and not overshoot to the end of the page. See the image below.
The beginning of the div that has the id "bg" starts out at the correct position but the end overshoots the container boundary. How do I fix this?