Bootstrap modal not showing in the expected way - html

Question

I am using bootstrap and my modal won't show up the way it is supposed to, I have tried using the form that is inside the modal on the page, and there it shows up correctly but inside the modal, the form is also displayed as deformed, I have already tried solutions to similar questions here but they didn't work. The modal looks like this,
Expected to look something like this but without the footer:
The bootstrap code:
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div>
<div class="styled-input wide">
<input type="email" id="email" required />
<label>Email</label>
</div>
</div>
<div>
<div class="styled-input wide">
<input type="number" id="phone" required />
<label>Phone Number</label>
</div>
</div>
<div>
<div class="styled-input wide">
<input type="number" id="monthlyTurnOver" required />
<label>Monthly Turnover</label>
</div>
</div>
<div>
<div class="styled-input wide">
<input type="text" id="purpose" value="B2B collection" required />
<label>Purpose</label>
</div>
</div>
<div class="col-md-12 d-flex justify-content-center">
<input class="enalo-small-btn" style="height: 2.4375rem; margin-bottom: .4rem;" type="submit" value="Submit" onclick="contactUs()">
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

I am not sure what I did differently but I copied code from the modal I had built earlier on the same site which made it appear a lot better, than I overrode some styles and now it's visible properly, Thank you for your help,
The new code:
<div class="modal fade" style="font-size: 14px;" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog d-flex justify-content-center" role="document">
<div class="modal-content px-2" style="max-width: 300px;" id="modal">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<div class="ml-auto">
<button type="button" class="close" data-dismiss="modal" id="crossclose" aria-label="Close" style="width: 83px;
height: 50px;
margin-top: 0px;
border: none;">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="modal-body">
<div class="container">
<div>
<div class="styled-input wide">
<input placeholder="Email" type="email" id="email" required />
</div>
</div>
<div>
<div class="styled-input wide">
<input placeholder="Phone Number" type="number" id="phone" required />
</div>
</div>
<div>
<div class="styled-input wide">
<input placeholder="Monthly Turnover" type="number" id="monthlyTurnOver" required />
</div>
</div>
<div>
<div class="styled-input wide">
<input placeholder="Purpose" type="text" id="purpose" value="B2B collection" required />
</div>
</div>
<div class="col-md-12 d-flex justify-content-center">
<button class="enalo-small-btn" style="height: 2.4375rem; margin-bottom: .4rem;" type="submit" onclick="contactUs()">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
Looks like this: