click here for the screenshot of the webpage I'm working on
Hey there! I'm currently working on a school project for my assignment. I'm having some trouble adjusting the size of the background grey box to fit with the content inside, such as the E-mail and password boxes. Here's the code I'm struggling with:
{{!-- Sign-up page view --}}
<br/><br/>
<form action="" style-"width: 700px; margin: auto"
<div class="jumbotron">
<div class="col-md-5 col-md-offset-5">
<h1>Sign up</h1>
{{# if hasErrors}}
<div class="alert alert-danger">
{{# each messages}}
<p>{{ this }}</p>
{{/each}}
</div>
{{/if}}
<form action="/user/signup" method="post" style="width: 500px; margin:auto">
<br/>
<div class="form-group">
<label for="email">E-Mail</label>
<input type="text" id="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" id="address" name="address" class="form-control">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone" class="form-control">
</div>
<input type="hidden" name="_csrf" value="{{ csrfToken }}">
<button type="submit" class="btn btn-primary pull-right">Sign up</button>
</form>
</div>
</div>