Div stretching to browser width and not the content inside it - html

Question

Hi i have a problem i need to fix i have a form that i need to put inside a box so i put the form inside a div and assigned a background-color to the div the only problem is the div is sretching the whole browser width when i want it to only stretch as far as the content.
Heres a screenshot:
Screenshot
CSS CODE:
.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 CODE:
<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>

Answer 1

You need an outer DIV styled text-align:center
<div style="text-align:center" >
Then you need to change the CSS for your content wrapper to:
.content-wrapper {
display:inline-block;
text-align:left;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
}
Note the first two lines and the last two lines.
I have to look this up every time I need to do it :)

Answer 2

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