how to create a container the full width of another container - html

Question

I am creating a login, and want to add a container to another container. One container is light blue and the other one is dark blue. This is a screen shot of what it currently looks like
I want to be able to have the dark blue container the full width of the other container, and the height to be bigger than what it currently is. This is the structure of the html below:
<div class="container">
<a href="../index.html">
<img id="logologin" src="../img/logo1.png" alt="logo"/>
</a>
<div class="card card-container">
<?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>
<?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert"> <?php echo $fmsg; ?> </div><?php } ?>
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin" method="POST">
<span id="reauth-email" class="reauth-email"></span>
<label> <input type="text" name="username" id="username" class="form-control" placeholder="Username"></label>
<label><input type="password" name="password" id="password" class="form-control" placeholder="Password" required></label>
<div id="remember" class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" name="submit">Sign in</button>
<div class="link"> <a href="register4.php"> Forgot Password?
</a></div>
</form><!-- /form -->
<div class="forgot-password">
Don't have an account? <a href="register4.php"> Create an account
</a>
</div><!-- /forgot-password -->
</div><!-- /card-container -->
</div><!-- /container -->
This is the css I have for the dark blue container I am trying to build
.forgot-password {
color: #848585;
font-size:14px;
background-color: #5967b9;
}
Thanks for any help in advance - js fiddle containing all code https://jsfiddle.net/68t0t1jt/

Answer 1

You can bypass the card-container padding, that is the class with padding that is making impossible to inside elements to have the full width with this:
.card-container{
padding: 0 !important;
}
then you can add the padding or margin to the form element, to make it's contents back to the center:
<form class="form-signin" method="POST" style="padding: 40px 40px;">
and then you use this forgot-password class:
.forgot-password {
color: #848585;
font-size:14px;
background-color: #5967b9;
width: 100%;
//height: 75px --if you want to change height, just uncomment
}
very basic fiddle: https://jsfiddle.net/6L84ycr4/
Hope it helps you

Answer 2

Here is the updated fiddle : jsfiddle.net/68t0t1jt/1
As described in the comments, you just have to remove the padding from .card-container.card and reapply it to .form-signin

Answer 3

You Can Try:
<div class="container" style="height: inherit;" >
or height:100%