For a school project, I am working on creating a sign-in page. Although I have come across this code, it does not appear at the center of the page as intended. Instead, the left side displays to the left while the right side shows up to the right. My goal is for the right section to be below the left one after both are centered. Below is the snippet of my code:
<div class="container">
<div class="row">
<!-- Left half of the page -->
<div class="col-xs-6">
<form class="form-signin" method="post" action="login.php">
<h2 class="form-signin-heading">Please sign in</h2>
<div class="form-group">
<label for="inputEmail">Email address</label>
<input type="text" name="emailaddress" id="inputEmail" class="form-control" placeholder="Email address" value="" required autofocus>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
<!-- Right half of the page -->
<div class="col-xs-6">
<h3>Not a member yet?</h3>
<a href="join.php">Join our club</a>, it's the best!
</div>
</div>
</div>
What could be causing this layout issue? Would inserting additional code help resolve it? Why is the content aligning to the left side of my screen?