White space issue on right of web page - css

Question

I have been trying to determine the cause of the following issue on a web page.
With the code below, when any browser is resized and the page becomes horizontally scrollable, a white space appears on the right.
How can I remove this white space? Thanks for all help given!
body {
margin: 0;
padding: 0;
}
.wrap {
background-color: #2a2c67;
}
.main {
height: 50px;
text-align: center;
width: 1300px;
margin-right: auto;
margin-left: auto;
color: #fff;
}
<div class="wrap">
<div class="main">Content Goes Here</div>
</div>

Answer 1

the container "wrap" has no width set so, as a block element it will take 100% of the ACTUAL window size. when you horizontal scroll because the child has a fixed width bigger than his parent and the actual window, you will scroll the child, but the parent will remain with whatever window size it's atm and scrolling out of the window. It won't dinamically change his current width (as browsers understand) to fill the child width.
Imo you just have to change the background color to the children to fix it (not that it's broken).
Edited: Or as other people said... set the width to the wrap and not to the "main"
body {
margin: 0;
padding: 0;
}
.wrap {
}
.main {
height: 50px;
text-align: center;
width: 1300px;
margin-right: auto;
margin-left: auto;
color: #fff;
background-color: #2a2c67;
}
<div class="wrap">
<div class="main">Content Goes Here</div>
</div>