As a newcomer to the world of web development, I'm struggling with alignment in my project. Specifically, I have an issue with the features area - every time I add it, it appears above where I want it, below the search bar and image. View example
Here is the code snippet causing me trouble:
<body>
<div class="wrapper">
<div class="sidebar">
<h2>Database</h2>
<ul>
<li><a href="#"><i class="fas fa-home"></i>Home</a></li>
<li><a href="#"><i class="fas fa-user"></i>Search</a></li>
<li><a href="#"><i class="fas fa-address-card"></i>Add</a></li>
<li><a href="#"><i class="fas fa-hospital-alt"></i>Centers</a></li>
</ul>
</div>
<div class="main_content">
<form>
<div class="inner-form">
<div class="input-field first-wrap">
<div class="input-select">
<select data-trigger="" name="choices-single-defaul">
<option placeholder="">Blood Types</option>
<option>0</option>
<option>A</option>
<option>B</option>
<option>AB</option>
</select>
</div>
</div>
<div class="input-field second-wrap">
<input id="search" type="text" placeholder="Blood Quantity" />
</div>
<div class="input-field third-wrap">
<button class="btn-search" type="button">Search</button>
</div>
</div>
</form>
</div>
<div class="container py-5 my-5 z-depth-1">
<section class="p-md-3 mx-md-5 text-lg-left">
<h2 class="font-weight-bold text-center mb-5 pb-3">Features</h2>
<div class="row text-center d-flex justify-content-center">
<div class="col-lg-3 col-md-6 mb-lg-0 mb-5">
<i class="fas fa-map-marker-alt fa-3x indigo-text mb-4"></i>
<h4 class="font-weight-bold mb-4">Feature 1</h4>
<p class="text-muted px-2 mb-lg-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</section>
</div>
</div>
<script src="js/extention/choices.js"></script>
<script>
const choices = new Choices('[data-trigger]',
{
searchEnabled: false,
itemSelectText: '',
});
</script>
</body>Any assistance would be greatly appreciated! :D