How to center a container?

Hoping to be able to center my content and make it work better for phones and tablets.

HTML

<div class="container">
        <div class="row no-gutter">
            <div class="col-xs-12 text-center">
                <div id="table-of-grades">
                    <div class="table-row">
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle btn-block" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Select your class
                                <span class="caret"></span>
                            </button>
                            <ul id="classDropdown" class="dropdown-menu btn-block" aria-labelledby="dropdownMenu2">
                                <li><a href="#">Add class</a></li>
                                <li role="separator" class="divider"></li>
                            </ul>
                        </div>
                    </div>            
                    <div class="table-row">
                        <div class="table-cell"><h5 class="text-center">Your grade</h5> </div>
                        <div class="table-cell"> <h5 class="text-center">% of grade</h5> </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell"><input type="text" class="marks form-control" id="mark1" maxlength="8" placeholder="ex 75"> </div>
                        <div class="table-cell"> <input type="text" class="grades form-control" id="grade1" maxlength="8" placeholder="ex 50"> </div>
                    </div>
                    <div class="table-row">
                        <button type="button" id="markButton" onclick="calcluateGrades()" class="btn btn-default btn-block">What's my mark?</button> 
                    </div>
                    <div class="table-row text-left">
                        <h6>Current grade:</h6>
                        <h5 class="text-right" id="currentGrade"></h5>
                    </div>
        ...

CSS

.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

.some-margin {
  margin-left: 0px;
  margin-right: -15px;
}

.btn-default {
  color: #ffffff;
  background-color: #2F88AA;
  border-color: #FFFFFF;
}

.btn-default:focus,
.btn-default.focus {
  /*    color: #ffffff;
    background-color: #343642;
    border-color: #FFFFFF;*/
}

.btn-default:hover {
  /*color: #ffffff;
    background-color: #343642;
    border-color: #FFFFFF;

    makes things a little larger and nicer
    position: fixed;
    width: 100%;
    height: 100%;
    */
}

.alert {
  font-size: 18px;
}

h6,
.h6 {
  font-size: 14px;
  font-weight: normal;
}

h5,
.h5 {
  font-size: 17px;
}

footer {
  position: relative;
  background: #343642;
  color: #FFF;
}

#table-of-grades {
  display: table;
  margin: auto;
}

.table-cell {
  width:50%;
  float:left;
}

.text-left{
  text-align:left;
}