I'm attempting to utilize bootstrap in order to create a section that resembles this design: View Example
The issue I am encountering is the white block in the center overlaying the green background. When I add an additional class to the outermost div (padding), nothing appears, but when added to any of the other divs, it only covers the image and text rather than filling the entire padding height. I have experimented with z-index: 999 along with a width of 80% and height of 100%, yet it distorts the background.
I am uncertain about what steps to take next. Any guidance would be greatly appreciated. Thank you.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<div class="padding attractionPad">
<div class="container attractionContainer">
<div class="row">
<div class="col-sm-6">
<img src ="img2.png">
</div>
<div class="col-sm-6">
<ul class="attraction">
<li><h3>Ninja Course</h3></li>
<li><h3>Indoor Bounce Arena</h3></li>
<li><h3>Mechanical Wipeout Challenge</h3></li>
<li><h3>Ziplining Fun</h3></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html,body{
background-color: #EE870D;
width:100%;
height:100%;
}
.padding{
padding: 80px 0;
}
.padding img{
width:100%;
}
.attractionPad{
background-color: #8FBA51;
}
.attraction{
color:blue;
list-style:none;
}
.events li, .attraction li{
margin: 10px 0 50px 0;
}