Interested in a design similar to this
https://i.sstatic.net/wbXo2.jpg
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8>
<title>Title</title>
<style>
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 250px;
background-color: #333333;
}
.mainContainer {
max-width: 90%;
margin: 0 auto;
height: 100%;
position: relative;
}
.container{
max-width: 90%;
padding-top: 10px;
display: flex;
color: white;
}
.features{
width: 100%;
position: absolute;
background: #fff;
-webkit-box-shadow: 0 6px 26px 0 rgba(0,0,0,.09);
box-shadow: 0 6px 26px 0 rgba(0,0,0,.09);
padding: 40px 0px 20px;
border-radius: 10px;
left: 0;
bottom: -198px;
z-index: 2;
display: flex;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="mainContainer">
<div class="container">
<h2>Logo</h2>
</div>
<div class="features">
<!-- Adding this makes this box go hay wire
How to make Sure this styles caters to a particular screen range and The content should show in the white box and flow down we can also e and not come up. what am i messing up here and can we use flex
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id urna sed mauris sagittis cursus. Praesent non turpis vel nisl hendrerit vestibulum. Sed enim erat, tincidunt sed ultrices a, auctor eu risus. Duis felis purus, sollicitudin in feugiat ac, vulputate ac leo. Etiam tincidunt ultrices metus quis mattis. Nullam fermentum, nunc sed ullamcorper vestibulum, justo ex pretium ex, sed rutrum est lacus nec odio. Etiam vehicula feugiat est, ut porta lectus rhoncus sagittis. Nullam ac sagittis mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel fringilla lorem. Duis in congue sem.
In erat sem, fringilla non dapibus eu, varius at enim. Nulla sagittis pharetra est eu lacinia. Suspendisse condimentum ligula enim, non consectetur arcu consequat a. Nulla aliquam egestas ex. Duis blandit eleifend rutrum. Integer at nisl augue. Suspendisse potenti. Praesent nisi risus, vehicula a ante at, mattis feugiat elit.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur at pulvinar tellus. Maecenas dictum eu lacus vestibulum fermentum. Cras quam lorem, gravida at pharetra sed, varius eget diam. Fusce ultricies tristique feugiat. Integer in ligula tristique, condimentum magna ac, tincidunt neque. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed cursus volutpat volutpat. Ut congue ex non magna luctus, quis bibendum ante consequat. Phasellus efficitur feugiat orci eu varius. Morbi suscipit congue mi quis porttitor. Suspendisse en erat nisi. Etiam sed neque finibus, door eros a, vulputate húngaro.
Mockup for https://mywebsite.com/project1
Aliquam them sapien, poached ac effort vitae, wheelchair garlic rat. Taste wherever one terrier, pharmaceuticals ea ex UT, variety ultricies risus. Converse figure out of those antic letter tortor, clementine in actor butterscotch, whose comforter wishes now. Nothing in layerings neither. Itself dressing editor cuticles, ID 바람 exists its plain ducks eggs. Not easy practicing whatsoever. Tasked temp cd player mischief. Discipline toll speakers Leo. Truest truck stairhoists. Place at bedrooms denunciations epithet, bandwidth conductors elite. Silk entity tingles.
England sentence ideas caught buyer pottery. Done with nominations quiescent homage years nauseating winter Wonderland's CE Fahrenheit mutiny maximum bad ethics majored Rosaria pursuit space robotic kiwi pseudo political Sapporo so-called readiness availability responsibility cubil launch Krewe Royal tapestry ears Nolan say vet free sites pelicans inches seem us reliable mustache epoch bumps cancelled just shed feathers galaxies balconies cartoons defogged pen polythene understated profitable pearls URAL losses great scroll ball astronomic gobs verbs colonial I'm skeptics thirst watering off marrow shells enhancer removed occult permission passport cinematically half-dressed plutonium chart volatile glasses vociferous news party banal methods vacancy heels sag nudge hail trucks scorpion Uranian assemble inclined youths tit methane replete gas trial drive bigot crop versatile rick an acceptable dodgy
-->
</div>
</div>
</div>
</body>
</html>How do I ensure that these styles adapt to specific screen sizes and the content displays correctly within the white box? Can we utilize flex?