Zmień sobie w CSS kolor samego DIV'a na np. czerwony
main {background-color: rgba(201,76,76,0.5);}
.field {
box-sizing: border-box;
width: 300px;
height: 400px;
margin-top:200px;
background-color: red;
}
i sprawdź, co się dzieje. U mnie DIV jest odpowiedniej szerokości, tylko znajduje się po lewej stronie. Podejrzewam, że u Ciebie jest podobnie - tylko ponieważ kolor nadałeś samemu MAIN a nie DIV, to go nie widzisz ;)
Żeby ustawić go na środku - dodaj do stylu jeszcze:
margin-right: auto;
margin-left: auto;
Sprawdzałem i mogę swobodnie zmieniać wysokość oraz szerokość tego DIVa i wszystko zachowuje się tak, jak powinno :)