Trying to center my divs, so that when I switch monitors they stay the same size

Hello I'm new to html/css and I was wondering how to center divs so that when I switch to a different monitor they will stay in the same place.

The problem at the moment is that when I switch monitors the header moves so that it doesn't line up with the edge of the big div below. I would like it if when you switch monitors everything stretched in per-portion to the new monitor

This is what it looks like on one monitor This is what it looks like on second monitor I'd like it so the header titles lines up with the div box, no matter which monitor it is displayed on. So how it is on one monitor is how it will be displayed on the other monitor

HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>About</title>
        <link rel="stylesheet" type="text/css" href="about.css">
        <script>    </script>
    </head>
    <body>

    <div class="mainContainer">

        <div class="header">

            <div id="headerTopSection">
                <div id="titleWordsWrapper">
                    <div id="titleHeaderTailored">Tailored
                        <div id="titleHeaderSystems">Systems</div>
                    </div>
                </div>

                <div id="productsAndInformationWrapper">
                <div id="contactUs">Contact</div>
                <div id="products">Products</div>
                </div>
            </div>
        </div>
            <div id="midSection">Need this to stay the same</div>

    </div>
    </body>
    </html>

CSS

div{
    border-style:solid;
    border-width:1px;
    border-color:white;
}
html{
    height: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
body{
        background-color: #252322;
}
.mainContainer{
    margin-left:auto;
    margin-right:auto;
    width: auto;
    height: 400px;
}
.header{
    background-color: #252322;
    font-family: arial, sans-serif;
    height: 80px;
    overflow: hidden;
    padding-top: 19px;
}
#headerTopSection{
    height: 80px;
    width: auto: 0px;
}
#titleWordsWrapper{
    width: 350px;
    height: 50px;
    float: left;
}

#titleHeaderTailored{
    color: white;
    font-size: 30px;

}
#titleHeaderSystems{
    color: yellow;
    display: inline-block;
    font-size: 30px;
}
#productsAndInformationWrapper{
    width: 350px;
    height: 50px;
    float: right;
}
#products{
    float: right;
    color: white;
    font-size: 30px;
    padding-right: 20px;

}
#contactUs{
    float: right;
    color: white;
    font-size: 30px;
}
#midSection{
    height: 200px;
    width: 1000px;
    background-color: #282625;
    clear: left;
    margin-left: auto;
    margin-right: auto;
    color: white;
}

Solution

you are using margin-left: auto; on #midSection so it will definitely auto align itself in center. To get what you want fix the value of

 margin-left: 120px    <---change value accordingly