How can you make a wrap responsive? - css

Question

I have researched this to the max and haven't been able to find ANY information. I started thinking, maybe it had to do with media queries, but I really couldn't get anything to work for me.
My question is, how can I make a wrap responsive? I utilize Twitter Bootstrap and am running into a unique issue.
I have a simple wrap that looks like this:
.wrap {
width: 800px;
margin: 0 auto;
}
Then, I have a form, that looks like this:
<div class="wrap">
<div class="col-sm-12">
<form class="form-inline" name="contactform">
<div class="col-sm-6 form-group form-sty">
<label class="sr-only" for="first" required>First Name</label>
<input type="text" class="form-control-sty" name="first" placeholder="First Name">
</div>
<div class="col-sm-6 form-group form-sty">
<label class="sr-only" for="last" required>Last Name</label>
<input type="text" class="form-control-sty" name="last" placeholder="Last Name">
</div>
<div class="col-sm-6 form-group form-sty">
<label class="sr-only" for="phone" required>Phone</label>
<input type="text" class="form-control-sty" name="phone" placeholder="Phone">
</div>
<div class="col-sm-6 form-group form-sty">
<label class="sr-only" for="email" required>Email</label>
<input type="email" class="form-control-sty" name="mailfrom" placeholder="Email">
</div>
<div class="col-sm-12 form-sty">
<label class="sr-only" for="comment">Comment</label>
<textarea class="form-control-sty" name="message" id="message" rows="7" placeholder="What's on your mind?" required></textarea>
</div>
<div class="col-sm-12 form-sty form-sty-btn">
<button type="submit" value="Submit" class="btn btn-default col-sm-12">Send</button>
</div>
</form>
</div>
</div>
The issue I'm having is, since this sits inside of a wrap, when the site scales down the form fails to scale as well since it is filling the entirety of the 800px wrap.
I'm not looking for an answer as much as I'm looking for suggestions?
THanks for any help you can offer.
You can also view the actual website for a better idea, here: www.bestillcreative.com

Answer 1

.wrapper{
width:100%:
max-width:800px;
}

Answer 2

.wrap {
width:100%;
max-width:800px;
margin: 0 auto;
}
.form-sty{
margin:10px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap">
<div class="col-sm-12">
<form class="form-inline" name="contactform">
<div class="col-sm-6 form-group form-sty">
<div class="col-sm-3 col-md-4"> <label for="first" required>First Name</label></div>
<div class="col-sm-3 col-md-2"> <input type="text" class="form-control-sty" name="first" placeholder="First Name"></div>
</div>
<div class="col-sm-6 form-group form-sty">
<div class="col-sm-3 col-md-4"> <label for="last" required>Last Name</label></div>
<div class="col-sm-3 col-md-2"><input type="text" class="form-control-sty" name="last" placeholder="Last Name"></div>
</div>
<div class="col-sm-6 form-group form-sty">
<div class="col-sm-3 col-md-4"> <label for="phone" required>Phone</label></div>
<div class="col-sm-3 col-md-2"><input type="text" class="form-control-sty" name="phone" placeholder="Phone"></div>
</div>
<div class="col-sm-6 form-group form-sty">
<div class="col-sm-3 col-md-4"><label for="email" required>Email</label></div>
<div class="col-sm-3 col-md-2"><input type="email" class="form-control-sty" name="mailfrom" placeholder="Email"></div>
</div>
<div class="col-sm-6 form-sty">
<div class="col-sm-3 col-md-4"><label for="comment">Comment</label></div>
<div class="col-sm-9 col-md-8"><textarea class="form-control-sty" name="message" id="message" rows="7" placeholder="What's on your mind?" required></textarea></div>
</div>
<div class="col-sm-12 form-sty form-sty-btn">
<button type="submit" value="Submit" class="btn btn-default col-sm-12">Send</button>
</div>
</form>
</div>
</div>
Try this structure