I would like to create something similar to this https://i.sstatic.net/gFTO3.jpg
so I followed these steps
<div class="container">
<div class="row">
<div class="page-account-box">
<div class="col-lg-8 col-md-8 col-xs-12 mx-auto">
<div class="account-box">
<div class="picture_account">
<img src="~/images/d2.jpg" class="imgFormat " />
</div>
<div class="account-box-content mt-4">
<h4>Register</h4>
<form method="post" class="form-group ">
<div class="row pt-2">
<div style="display:inline">
<label>Name </label>
<input type="text" class="col-md-4" id="FirstName">
</div>
<div style="display:inline">
<label>Lastname </label>
<input type="text" class="col-md-4" id="LastName">
</div>
</div>
<div class="row pt-2">
<div>
<label>Email </label>
<input type="email" class="col-md-8" id="Email" />
</div>
</div>
<div class="row pt-2">
<div>
<label>Mobile </label>
<input type="text" class="col-md-8" id="Mobile">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
and here is the css code
.page-account-box .account-box .account-box-content {
min-height: 50%;
padding: 15px 20px;
text-align: center;
border-radius: 20px;
display: inline;
border: 2px solid black;
width: 100%;
}
.page-account-box .account-box {
width: 100%;
height: auto;
padding: 0;
border: 1px solid #e2efef;
-webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11);
box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
position: relative;
margin: 70px auto 30px;
display: flex;
background: #fff;
border-radius: 20px;
}
however, the result looks like this https://i.sstatic.net/mRtRK.jpg
How can I achieve the desired outcome?