I have encountered a problem where my panel is covering the content of the div above it, despite having two fieldsets before the panel. Please refer to the screenshots below:
1.) Display with Fieldsets and details 2.) After adding the panel, the Panel-heading extends to cover the entire content
https://i.sstatic.net/TX1SN.png
https://i.sstatic.net/nX5V5.png
<div class="container">
<div class="enquiry">
<fieldset class="col-md-12">
<legend><h3>Nag</h3></legend>
<div class="row form-group">
<div class="col-md-4">
<h4>DOB: <span>22-April-2001, Male</span> </h4>
<h4>Enquired: <span>07 </span> </h4>
<h4>Academic Year: <span>2017-2018</span></h4>
</div>
<div class="col-md-4">
<h4>Nagarjuna (Father)</h4>
<h4><i class="fa fa-phone"></i> 9635821471</h4>
<h4><i class="fa fa-envelope"></i> <span class="enq-parent-email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4628272168272d2d2f06212b272f2a6825292b">[email protected]</a></span> </h4>
</div>
<div class="col-md-4">
<h4>
<i class="fa fa-home fa-2x"></i>
</h4>
</div>
</div>
</fieldset>
<fieldset class="col-md-12 margin-bottom">
<legend><h3>Overview</h3></legend>
<div class="row form-group margin-bottom">
<div class="col-md-4">
<label>Current Name: </label>
<input type="text" class="form-control" readonly="" value="Name">
</div>
<div class="col-md-4">
<label>Current Loasdaf Name: </label>
<input type="text" class="form-control" readonly="" value="asdfaiwewrw">
</div>
<div class="col-md-4">
<label>fasdaskdlfa;skdljfa;skldf</label><br>
<input type="radio" name="transport" readonly="" checked=""> Yes
<input type="radio" name="transport" readonly=""> no
</div>
</div>
// More input fields here
</fieldset>
</div>
<br>
</div>
https://i.sstatic.net/nX5V5.png
This issue seems unusual to me as I haven't come across such problems before.
Looking forward to receiving some assistance. Thank you in advance!