How do I get margins on this page like the rest of the pages?

Question

I am developing a site for my high school robotics team and I wanted to make margins for this one page like the others, but when I set margins to auto, or any value for that matter, it does nothing. I am using bootstrap.

Page I want margins on - http://www.robotichive3774.com/Our%20Coach/

<div class="jumbotron">
  <h1>Our Coach, Marie Aloia</h1>
  <p>Here you'll learn a little bit about our team coach.</p>
</div>
<div class="panel panel-default">
  <div class="panel-body" id="page-info">
    <ul class="List_Acc"> <!-- main list -->
        <h2>List of Accomplishments</h2>
    </ul> <!-- end main-list -->
<ul class="list-group"><!-- main list -->
        <h2>Colleges/degrees</h2>
            <li class="list-group-item">Montclair University</li>
                <ul class="list-group"> <!-- sub list -->
                    <li class="list-group-item">Math/Physics</li>
                </ul> <!-- end sub-list -->
            <li class="list-group-item">New Jersey Institute of Technology</li>
                <ul class="list-group"> <!-- sub list -->
                    <li class="list-group-item">Chemical Engineering</li>
                </ul> <!-- end sub-list -->
    </ul> <!-- end main-list -->
    <ul class="list-group"> <!-- main list -->
        <h2>Prior Work History</h2> 
            <li class="list-group-item">Exxon Mobil Research and Development-20 years</li>
            <li class="list-group-item">5 years at various High Technology Firms</li>
    </ul> <!-- end main-list -->
    <ul class="list-group"> <!-- main list -->
        <h2>Memorable Students and their Accomplishments</h2>
            <li class="list-group-item"><h4>Eric Delgado (Yale University)</h4></li>
                <ul class="list-group"> <!-- sub list -->
                    <li class="list-group-item">Science Talent Search Finalist</li>
                </ul> <!-- end sub-list -->
            <li class="list-group-item"><h4>Dan Borowski (Rutgers University)</h4></li>
                <ul class="list-group"> <!-- sub list -->
                    <li class="list-group-item">Google Computer Science Summer Institute</li>
                </ul> <!-- end sub-list -->
            <li class="list-group-item"><h4>Sharif Abdelbaky (University of Pittsburgh)</h4></li>
                <ul class="list-group"> <!-- sub list -->
                    <li class="list-group-item">NASA Robotics Intern-ship</li>
                    <li class="list-group-item">Google Computer Science Summer Institute</li>
                </ul> <!-- end sub-list -->
            <li class="list-group-item"><h4>Gemma David (Rutgers University)</h4></li>
                <ul class="list-group"> <!-- sub-list -->
                    <li class="list-group-item">Founder of FTC Team 3774</li>
                    <li class="list-group-item">Attended New Jersey Governors School</li>
                </ul> <!-- end sub-list -->
    </ul> <!-- end main-list -->
    <ul class="list-group">
        <h2>Organizations</h2>
            <li class="list-group-item">Society for Women Engineers</li>
    </ul>
  </div>
</div>


</body>
</html>

CSS

.banner
{
float: bottom;
}

#top-jumbotron
 {
    padding-left:0;
    padding-right:0;
    padding-bottom:0;
    margin-bottom: 0;
}

#page-info
{
margin-left: auto;
margin-right: auto;
}

body
{
background-image: url("robots2.png");
}

Answer 1

wrap the code you want to be in the middle of the page (ie with margins) in a container:

<div class="container">
    your code in here...
</div>

the containers in bootstrap are the parts that make the content be in the middle of the page

you could probably put the opening for the container directly after your opening body tag and close the div right before your