CSS website changes div size once published

I'm working on my website, and have the main body div set to a certain width. But when I upload all my files to the web host the size of width shrinks, and no matter how i adjust the code for the div the width size stays the same(wrong size) on my published site, despite looking right when i just open the code in a browser.

I've tried Editing the code directly in the web host to see if I can even adjust the width at all. I've already tried deleting and re-uploading everything a few times.

Heres what I have on my css style sheet:

.body1{

max-width: 1200px;
height: 1000px;
background-color: #fffdf8;
margin: auto;
padding: 10px;
text-align: center;
border: 2px solid #f892c9;

}

the width of 1200px is how big i want it to be, and it appears correctly when i open the html file in a browser. When I upload the code with a webhost the width is smaller, and even if I change it to a bigger number like 1500px it stays the small size.