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="centerDiv">
        <div class="row no-gutter">
            <div class="col-xs-2">
                <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>

        <div id="the-grades">
            <div id="table-of-grades">
                <div class="row no-gutter">
                    <div class="col-xs-1"><h5 class="text-center">Your grade</h5> </div>
                    <div class="col-xs-1"> <h5 class="text-center">% of grade</h5> </div>
                </div>
                <div class="row no-gutter">
                    <div class="col-xs-1"><input type="text" class="marks form-control" maxlength="8" placeholder="ex 75"> </div>
                    <div class="col-xs-1"> <input type="text" class="grades form-control" maxlength="8" placeholder="ex 50"> </div>
                </div>
                <div class="row no-gutter">
                    <div class="col-xs-1"> <input type="text" class="marks form-control" maxlength="8"  placeholder="ex 88"> </div>
                    <div class="col-xs-1"> <input type="text" class="grades form-control" maxlength="8"  placeholder="ex 30"> </div>
                </div>
                <div class="row no-gutter">
                    <div class="col-xs-1"> <input type="text" class="marks form-control" maxlength="8" ></div>
                    <div class="col-xs-1"> <input type="text" class="grades...

CSS

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