Display flex causes text to be split up - php

Question

I'm trying to align the items in the center of the page. I'm using display: flex however, this causes the text to be split up into different columns but I don't want that, I want the text to be normal, you know. When the session is set, the text will show; you can see the forms are aligned in the center, but the text isn't.
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: -0.5px;
}
html,
body {
height: 100%;
width: 100%;
background: #fff;
}
.content-container {
width: 100%;
height: auto;
padding: 10pt;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
margin-top: 30pt;
display: flex;
justify-content: center;
}
.header {
top: 0;
position: fixed;
height: 30pt;
width: 100%;
background: rgba(255, 255, 255, 0.50);
border-bottom: 1.5px solid #0047FF;
}
.header-content {
width: 100%;
height: inherit;
margin: 0 auto;
white-space: nowrap;
line-height: 30pt;
padding: 0 5pt;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header-menu {
border-right: 1px solid #0047FF;
margin-right: 10pt;
width: auto;
height: inherit;
float: left;
padding: 0 5pt 0 0;
}
.header-menu ul li {
list-style: none;
float: left;
}
.header-menu ul li a {
color: #555;
text-decoration: none;
padding: 0 3pt;
float: left;
}
.logout-form__ button {
background: none;
cursor: pointer;
border: none;
outline: none;
color: #555;
}
.logout-form__ button:hover {
color: #888
}
.header-menu ul li a:after {
content: "/";
padding: 0 0 0 5pt
}
.header-menu ul li:last-child a:after {
content: "";
padding: 0;
}
.header-menu ul li a:hover {
color: #888;
}
.header-menu ul li a:hover:after {
color: #555
}
.header-search form input {
border: none;
background: rgba(255, 255, 255, 0.50);
outline: none;
padding: 5pt;
border-top: 1px solid #eee;
width: 250pt;
display: inline-block;
color: #555
}
.header-search form input:focus {
border-color: #ccc;
background: rgba(255, 255, 255, 0.80)
}
.header-search form button {
background: rgba(255, 255, 255, 0.50);
border: none;
outline: none;
border-top: 1px solid #eee;
padding: 5pt;
cursor: pointer;
color: #555
}
.header-search form button:hover {
border-color: #ccc;
background: rgba(255, 255, 255, 0.60);
}
.same-form-styling {
float: left;
padding: 10pt 0;
border-bottom: 1px solid #ccc;
width: auto;
width: 400pt
}
.forms-title {
border-bottom: 1px solid #ccc;
padding: 0 0 10pt 0;
margin-bottom: 10pt
}
.forms-title span {
font-size: 16px;
}
.same-form-styling form input {
width: 100%;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10pt 0;
border: none;
outline: none;
border-bottom: 1px solid #eee;
}
.same-form-styling form button {
border: none;
outline: none;
padding: 10pt;
border-left: 1px solid #eee;
float: left;
background: none;
border-right: 1px solid #eee;
width: 150pt;
}
<?php
include_once './Private/Backend/Database/conn.php';
if(isset($_POST['logout'])) {
session_destroy();
unset($_SESSION['id']);
unset($_SESSION['username']);
unset($_SESSION['email']);
header("location: index.php?a=login");
}
/* ### */
if(isset($_POST['login-btn'])) {
$l_email = mysqli_real_escape_string($main, $_POST['l-email']);
$l_email = stripcslashes($l_email);
$l_pass = mysqli_real_escape_string($main, $_POST['l-pass']);
$l_pass = stripcslashes($l_pass);
if(filter_var($l_email, FILTER_VALIDATE_EMAIL)) {
$hashed = md5(sha1(md5(sha1($l_pass))));
$sql = "SELECT * FROM accounts WHERE email='$l_email' and password='$hashed'";
$result = mysqli_query($main, $sql);
if(mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
$_SESSION['id'] = $row['id'];
$_SESSION['username'] = $row['username'];
$_SESSION['email'] = $row['email'];
header("location: index.php");
}
} else {
header("location: index.php?a=login&loginErr=wrong&email=$l_email");
}
} else {
header("location: index.php?a=login&loginErr=invalidEmail&email=$l_email");
}
}
if(isset($_POST['reg-btn'])) {
$username = mysqli_real_escape_string($main, $_POST['reg-uname']);
$username = stripcslashes($username);
$username = strip_tags($username);
$email = mysqli_real_escape_string($main, $_POST['reg-email']);
$email = stripcslashes($email);
$email = strip_tags($email);
$email_c = mysqli_real_escape_string($main, $_POST['reg-c-email']);
$email_c = stripcslashes($email_c);
$pass = mysqli_real_escape_string($main, $_POST['reg-pass']);
$pass = stripcslashes($pass);
$pass_c = mysqli_real_escape_string($main, $_POST['reg-c-pass']);
$pass_c = stripcslashes($pass_c);
if(!empty($username && $email && $email_c && $pass && $pass_c)) {
$sql = "SELECT * FROM accounts WHERE username='$username'";
$result = mysqli_query($main, $sql);
if(mysqli_num_rows($result) > 0 ){
header("location: index.php?a=register&registerErr=userTaken&username=$username&email=$email&cEmail=$email_c");
} else {
if(filter_var($email, FILTER_VALIDATE_EMAIL)) {
if($email == $email_c) {
$sql = "SELECT * FROM accounts WHERE email='$email'";
$result = mysqli_query($main, $sql);
if(mysqli_num_rows($result) > 0) {
header("location: index.php?a=register&registerErr=emailTaken&username=$username&email=$email&cEmail=$email_c");
} else {
if(strlen($pass) >= 6) {
if($pass == $pass_c) {
$hashedBrown = md5(sha1(md5(sha1($pass))));
$sql = "INSERT INTO accounts (username, account_type, first_name, last_name, gender, bio, email, password) VALUES ('$username', 'Regular User' , '', '', '', '','$email', '$hashedBrown')";
$result = mysqli_query($main, $sql);
$sql = "SELECT * FROM accounts WHERE username='$username' and email='$email'";
$result = mysqli_query($main, $sql);
$row = mysqli_fetch_assoc($result);
$_SESSION['id'] = $row['id'];
$_SESSION['username'] = $row['username'];
$_SESSION['email'] = $row['email'];
header("location: index.php");
} else {
header("location: index.php?a=register&registerErr=passwordsDoNotMatch&username=$username&email=$email&cEmail=$email_c");
}
} else {
header("location: index.php?a=register&registerErr=passwordLen&username=$username&email=$email&cEmail=$email_c");
}
}
} else {
header("location: index.php?a=register&registerErr=emailsDoNotMatch&username=$username&email=$email&cEmail=$email_c");
}
} else {
header("location: index.php?a=register&registerErr=username=$username&email=$email&cEmail=$email_c");
}
}
} else {
header("location: index.php?a=register&registerErr=allEmpty");
}
}
?>
<!DOCTYPE html>
<html lang="en" style="overflow-x: hidden;">
<head>
<meta charset="UTF-8" />
<title>ICode Foundation</title>
<link rel="stylesheet" type="text/css" href="./Public/CSS/Beta/all.css" />
</head>
<body>
<div class="header">
<div class="header-content">
<div class="header-menu">
<ul>
<?php if(!isset($_SESSION['id'])) { ?><li>Register</li><?php } ?>
<?php if(!isset($_SESSION['id'])) { ?><li>Login</li><?php } ?>
<?php if(isset($_SESSION['id'])) { ?><li>Home</li><?php } ?>
<?php if(isset($_SESSION['id'])) { ?><li>You <span>(<strong><?php echo $_SESSION['username']; ?></strong>)</span></li><?php } ?>
<?php if(isset($_SESSION['id'])) { ?><li><a href="#">
<form action="index.php" method="POST" class="logout-form__">
<button type="submit" name="logout">
Logout
</button>
</form>
</a></li><?php } ?>
</ul>
</div>
<div class="header-search">
<form action="#" method="GET">
<input type="text" placeholder="Search" name="q" autocomplete="off" /><button type="submit" name="search-btn">Search</button>
</form>
</div>
</div>
</div>
<div class="content-container">
<?php if(!isset($_SESSION['id'])) { ?>
<?php if(isset($_GET['a'])) { ?>
<?php if($_GET['a']=="register") { ?>
<div class="register same-form-styling">
<div class="forms-title"><span>Register</span></div>
<form action="index.php" method="POST">
<input type="text" name="reg-uname" placeholder="Username" <?php if(isset($_GET['username'])) { echo 'value="' . $_GET['username'] . '"'; } ?> />
<input type="text" name="reg-email" placeholder="Email Address" <?php if(isset($_GET['email'])) { echo 'value="' . $_GET['email'] . '"'; } ?> />
<input type="text" name="reg-c-email" placeholder="Confirm Email" <?php if(isset($_GET['cEmail'])) { echo 'value="' . $_GET['cEmail'] . '"'; } ?> />
<input type="password" name="reg-pass" placeholder="Password" />
<input type="password" name="reg-c-pass" placeholder="Confirm Password" />
<button type="submit" name="reg-btn">Register</button>
</form>
<div class="register-info" style="clear:both;border-top: 1px solid #ccc;padding: 10pt 0 0 0;">You are not hindered to a specific array of characters to inlude in your password therefore, ensure your password is strong and memorable. Hindering users on what characters they can use in their password is an idiotic move hence, we don't include such feature nor endorse this practice. It is solely your fault and responsibility if your password is easily guessable.</div>
</div>
<?php } elseif($_GET['a']=="login") { ?>
<div class="login same-form-styling">
<div class="forms-title"><span>Login</span></div>
<form action="index.php" method="POST">
<input type="text" placeholder="Email" name="l-email" <?php if(isset($_GET['email'])) { echo 'value="' . $_GET['email'] . '"'; } ?> />
<input type="password" placeholder="Password" name="l-pass" />
<button type="text" name="login-btn">Login</button>
</form>
</div>
<?php } else { ?>
<div class="unknown">
Unknown operation; it's either login or register.
</div>
<?php } ?>
<?php } ?>
<?php } else { ?>
<h1>Welcome</h1>
<p>All you can do is log in, edit your profile can search, view other profiles. Functionality such as blogging is an intended feature to soon be implemented. This site will go through major updates to ensure full reliability and user usability. Other major implementations such as code integrations to advance the site's functionality is desirable however, this site shouldn't be too advanced which could lead to hindrances thinking of new concepts for future updates.</p>
<p>This site will be powered by volunteers; voluntary developers, graphic designers and other skills that are beneficially suggestive towards this project. Your skills must include an array of professional and impeccable knowledge of a broad range of subjects and that bring in a diverse array of talent of knowledge to this project to grow and enlarge the project in many different ways. If you're interested in developing the site, email the lead developer at adamhope470#gmail.com. </p>
<p>You must lay your email out in a way that is comprehensible and professional. Ensure that you include your skills and how you will benefit the project in an innovative and intuitive manner. Include your programming skills and what programming languages do you know etc. Any other things that may help the project in different ways.</p>
<p>Skills like legal and business is helpful alongside impeccable English language skills. These skills will eventually contribute to administration and communicating with users to provide support wherever mandatory. You account role will fluctuate the features that you have access to; do not ask nor request roles of high rank, trusted members will be granted administration whereas moderators will be nominated based on the contributions they have made like translations etc. This is a for-profit project however, this will be a non-profitable project for the time being. </p>
<p>If you have any inquiries, questions or reports, you can contact the site's lead developer here or you can contact another administrator here.</p>
<p><strong>Your account could be susceptible to a susepnsion or a perminate ban if you're ever witnessed infringing our community guidelines. Review them here. These guidelines will ensure that the tranquility is persistant throughput, which will ensure that this service is safe for everyone to use. With that stated, before pursuing, you agree that you're 13 years or older.</strong></p>
<?php } ?>
</div>
<div class="footer-wrap">
</div>
</body>
</html>

Answer 1

When you set display: flex on an element it automatically applies flex-direction: row and flex-wrap: nowrap on the children (flex items).
This means that the items will line up horizontally and cannot wrap.
You have this:
.content-container {
display: flex;
justify-content: center;
}
jsfiddle demo
Instead, set the container to a vertical direction and then center the items:
.content-container {
display: flex;
flex-direction: column;
align-items: center;
}
jsfiddle demo