The content on the right side of this div container is struggling to reach full width for some unknown reason.
Click here to see an image of the issue. The right column is not extending to full width.
This snippet shows my CSS code.
The 'main-content' container expands to the edges of the screen, with 'full-content' or 'full-content-flex' (if the content is next to each other) nested inside and centered on the screen. The 'fifty-fifty-content' houses both a left form and a right form. Despite attempts to adjust widths and alignments in the code, nothing seems to be effective. The only control over the form fields comes from a master CSS file.
.main-content {
height: auto;
margin: 0;
background-color: #fff;
border-top: 5px solid #666;
}
.full-content {
max-width: 1000px;
height: auto;
margin: 0 auto;
padding: 10px;
}
.full-content-flex {
max-width: 1000px;
height: auto;
margin: 0 auto;
padding: 10px;
display: flex;
}
.sixtyfourtycontentleft {
padding: 20px;
text-align: left;
width: 700px;
border-right: 1px solid #E5E5E5;
}
.fifty-fifty-content {
text-align: left;
display: flex;
padding: 20px;
width: 50%;
background-color: gray;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="time"] {
border-radius: 5px;
display: block;
height: 30px;
width: 100%;
margin-bottom: 10px;
font-size: 18px;
padding: 10px;
border: 1px solid #CCC;
}
Here is the HTML code
<section class="main-content">
<section class="full-content-flex">
<div class="fifty-fifty-content">
<form action="register.php" method="post">
<input type="text" name="name" placeholder="Your name or organization name">
<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<input type="password" name="repeatpassword" placeholder="Password Again">
<input type="url" name="website" placeholder="Website">
<input type="submit" name="submit1" value="Submit & Login">
</form
</div>
<div class="fifty-fifty-content">
<form action="register.php" method="post">
<input type="text" name="name" placeholder="Your name or organization name">
<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<input type="password" name="repeatpassword" placeholder="Password Again">
<input type="url" name="website" placeholder="Website">
<input type="submit" name="submit2" value="Submit & Login">
</form
</div>
</section