I'm encountering an issue with the code block below. When attempting to make the screen responsive, the elements within the aircard div are not stacking as expected. Instead, they seem to overflow. I'm unsure of the reason for this behavior and how to rectify it. Here is the code snippet:
HTML:
<div class="container-fluid">
<div class="air-card">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 col-xs-offset-0">
<h2 class="text-center hidden-xs m-sm-bottom ng-scope"> Complete Your Account </h2>
<h4 class="text-center ng-binding ng-scope"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2bb8d97908c838f87a2858f838b8ecc818d8f">[email protected]</a> </h4> <br>
<form method="POST" action="confirm.html">
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
</select> <br> <br>
<input type="password" name="" placeholder="Create a Password" required> <br> <br>
<h4 style="text-align: center;"> I want to: </h4>
<button type="button" class="btn btn-light">Hire for a Project</button>
<button type="button" class="btn btn-light"> Work as a Freelancer </button>
<input type="checkbox" class="custom-control-input" id="customCheck1"">
<label class="custom-control-label" for="customCheck1"> Yes! Send me genuinely useful emails every now and then to help me get the most out of Extolssolutions. </label>
<input type="checkbox" class="custom-control-input" id="customCheck1"">
</div></label>
<button type="submit" class="btn btn-success"> Next </button>
</form>
</div>
</div>
</div>
</div>
CSS:
.air-card {
position: relative;
background-color: #fff;
margin: 30px 0px;
padding: 30px;
box-shadow: 0 1px 6px rgba(57,73,76,.35);
}
.select
{
margin-left: 420px;
}
input[type='password']
{
margin-left: 420px;
width: 354px;
}
input[type='checkbox']
{
margin-left: 420px;
text-align: center;
}
label a:hover
{
color: green;
}
.button[type='submit']
{
margin-left: 550px;
margin-top: 20px;
width: 8%;
}
.row a
{
color: #747676;
font-family: Arial,sens-serif;
}
JSBIN: http://jsbin.com/dupihupugu/1/edit?html,css,console,output
Newbie note: I am still learning CSS, Bootstrap 4, and Stack Overflow, so any guidance is appreciated.
[The full screen page][The responsive screen page]1