为什么这个div容器的内容不会达到全宽？

Question

由于某种原因，这个 div 容器的右侧拒绝让内容达到全宽。

这是我的CSS代码。

main-content 是一直延伸到计算机屏幕边缘的容器，在这种情况下，完整内容或完整内容 Flex（如果内容彼此相邻）会进入其中并与屏幕中间对齐。五五十内容既有左式，也有右式。我尝试过改变 div 的宽度和对齐方式。什么都不起作用。表单字段的唯一 css 控件是主 css 文件。

.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 my 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

Answer 1

更新了此样式代码

    .full-content-flex {
        max-width: 1000px;
        height: auto;
        margin: 0 auto;
        padding: 10px;
        display: flex;
        background-color: gray;     /* add bg color   */
    }

    .fifty-fifty-content {
        /* remove color   */
        flex: 1 0 0%;
    }
    form {
        width: 100%;
    }
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="number"],
    input[type="tel"],
    input[type="time"] {
        width: -webkit-fill-available;
    }

所以我希望你的问题得到解决