I have a div container that is centered in the middle of another container. I managed to adjust it for one slide, but the issue arises when I create multiple .html files using the same css file - the height of the container does not meet my expectations. Ideally, I want the height of the container to automatically adjust based on the content within it, while still accounting for margins, padding, and other styling attributes applied to the content container.
Below you will find my code snippets as well as an image showcasing the current output:
.template-benefits{
width: 100%;
padding-bottom: 50px;
position: relative;
}
.tbenefitswrpr {
width: 1000px;
margin: auto;
height: 400px;
padding: 50px 0 0 0 ;
}
.template-benefits h3{
font-weight: normal;
font-size: 1.3em;
color: rgb(150,150,150);
}
.template-benefits ul li{
list-style-type: disc;
}
.tbenefitswrpr h1{
font-weight: bold;
margin: 0px;
padding: 0px;
margin-bottom: 30px;
}
.tbenefitswrpr ul{
padding: 0px 0px 0px 20px;
}
.tbenefitswrpr li{
padding-bottom: 20px;
font-size: 1.2em;
font-weight: bold;
}<div class="template-benefits">
<div class="tbenefitswrpr">
<div class="tbenefits-left">
<h1>Preventative maintenance of equipment and assets</h1>
<ul>
<li>Schedule recurring work orders for routine preventative maintenance for anything from computers, technology, and other appliances or equipment</li>
<li>Easily view schedule of past completed maintenance work orders</li>
<li>Custom dashboards to track preventative maintenance</li>
</ul>
</div>
<div class="tbenefits-right">
<h1>Building and facility management</h1>
<ul>
<li>Manage multiple facilities all in one organized place</li>
<li>Easily view past completed security and safety inspections</li>
<li>Assign and coordinate work orders for repairs for utilities, plumbing, and broken appliances</li>
</ul>
</div>
</div>
</div>