Despite my best efforts, the content within the white box refuses to center itself. I've scoured numerous forums for solutions, tweaked the CSS, and attempted various suggestions, but it stubbornly remains in its original position.
Can someone please provide me with guidance on how to resolve this issue? I simply want to understand what mistake I am making and how to rectify it. If additional information is required, feel free to ask :).
Refer to the screenshot below for clarity:
https://i.sstatic.net/gpXEK.png
This is my HTML code:
<div class="container">
<div class="wrapped_content container">
<div class="white_content container">
<div class="row row-eq-height">
<div id="support-form-wrapper" class="col-xs-12 col-sm-12 col-md-8 form-wrapper">
<form class="container" id="submissionForm" name="submissionForm"
enctype="multipart/form-data" method="post">
{{ csrf_field() }}
<input type="hidden" name="submissionFormSubmitted" value="yes">
<div class="col-md-7 name-container">
<div class="name-support-forms">
<div class="form-group" id="name-form">
<p class="form_header center-block">Enter the confirmation code sent to your email.</p>
<input type="text" class="form-control center-block" id="inputNumberConfirm"
placeholder="######" onfocus="onConfirmFocus()">
<span class="subName error">*Required</span>
</div>
</div>
</div>
<div class="col-md-6 submit-btn-wrapper">
<div class="form-group">
<button type="submit"
class="d-block mx-auto btn btn-primary"
data-style="zoom-in" data-size="l">Get Temporary Password
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Here's my CSS code:
.wrapped_content {
background-color: #EFF0F1;
width: 100%;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
width: 100%;
}
.change_pass.center-block {
color: #717D79;
font-size: 32px;
font-weight: 200;
margin-top: 40px;
padding-top: 5%;
}
.wrapped_content h1, .white_content.container h1 {
text-align: center;
}
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
h1, .h1 {
font-size: 36px;
}
.white_content {
background-color: #fff;
margin-top: 30px;
max-width: 55%;
max-height: 70%;
margin-bottom: 153px;
border: 1px solid #C2C4C4;
height: 100%;
width: 638.797px;
}
#inputNumberConfirm {
max-width: 100px;
float: none;
}
@media (max-width: 684px) {
.white_content {
max-width: 100%;
max-height: 100%;
}
}
.form_header.center-block {
color: #717D79;
font-size: 20px;
font-weight: 200;
margin-top: 40px;
}
p {
margin: 0 0 10px;
}