Html Div延伸到浏览器宽度，而不是其中的内容

嗨，我有一个问题，我需要修复我有一个表单，我需要把它放在一个盒子里，所以我把表单放在一个div里，并给div分配了一个背景色。唯一的问题是div正在重新匹配整个浏览器的宽度，而我希望它只延伸到内容

这里是一个截图：

CSS代码：

.content-wrapper {
background-color: #FFFFFF;
width: auto;
height: auto;
}
.input-text {
background-image: url("images/input-text.png");
background-repeat: no-repeat;
width: 214px;
height: 39px;
font-size: 14px;
font-family: "custom font", Tahoma, sans-serif;
color: #9aa1aa;
border: none;
padding-left: 11px;
padding-right: 11px;
}
.input-text:focus {
background-image: url("images/input-textf.png");
color: #34495e;
outline: none;
}

HTML代码：

<div class="content-wrapper">

    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
        <?php
            echo $dbnameErr;
            echo $dbuserErr;
            echo $dbpassErr;
            echo $dbhostErr;
        ?>
        Database Name<input class="input-text" type="text" name="db-name" value="<?php echo $dbname;?>" ><br />
        Username<input class="input-text" type="text" name="db-username" value="<?php echo $dbuser;?>" ><br />
        Password<input class="input-text" type="text" name="db-password" value="<?php echo $dbpass;?>" ><br />
        Database Host<input class="input-text" type="text" name="db-host" value="localhost" ><br />
        <input type="submit">
    </form>

</div>

您需要一个外部DIV样式的文本align:center

<div style="text-align:center" >

注意前两行和后两行

每次我需要做的时候都要查这个：）

这将设置内容包装的宽度。
尝试添加
wordwrap:break-word
到您的
.content wrapper
是否尝试在不指定宽度属性的情况下离开“content wrapper”？它不会延伸到整个页面。我将.content wrapper div设置为红色。请在此处进行检查。不幸的是，上面的所有操作都不起作用
.content-wrapper {
display:inline-block;
text-align:left;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
}

.content-wrapper {
background-color: #FFFFFF;
width: 400px; //Set width of the content wrapper.
height: auto;
}