Zooming versus change in window width - html

Question

With all my reading on zooming with css, I have reached the conclusion that it's not really a good idea considering the limited support of zooming with all Browsers. In this regard, I cannot help but notice that Microsoft's WORD does not zoom the contents of the Word documents. Maybe they're right.
But let me trudge on ...
As a learning experience, what I'd really like to see with zooming is
= exactly what happens when re-sizing the Browser window. That is, element containers + font sizes + etc, shrink when contracting the window size (zoom out) and expand when increasing the window size (zoom in).
But, still maintaining the layout UNTIL a certain limit; e.g., when the width of the round corner box reaches a certain width say 80% of the device's width
For example:
BTW, the above is all block centered.
For example, the width rounded corner box increases with a bigger window = zoom in, and the box's width decreases with a smaller window
= zoom out.
I wish ditto for zooming, but zooming withOUT changing the window width, i.e., just for the contents of the window.
WHAT DOES HAPPEN:
with zooming in, everything appears to be doing well
with zooming out, okay UNTIL a couple of CMD-plus's. At this point, the rounded corner border shifts right and beyond the view of the Browser window and the super ugly horizontal scroll bar appears.
HTML:
<section class="roundedBodyCornersWrapper zoomStyleRule centerBlock elemPadding">
<div class="roundedBodyCorners">
<img class="headerImage centerImage" src="images/Broken_Heart.gif" alt="crying" />
<section class="roundedTextCornersWrapper centerBlock elemPadding">
CSS:
body {
background-color: white; /* around oval */
margin: 2.0em;
font-size: 120%;
min-width: 300px;
}
.zoomStyleRule {
width: 75%; /* always put fall-back spec 1st */
width: auto\9; /* IE8 = exception to fall-back spec */
width: 75vw; /* even if this isn't here, still does not work */
height: auto;
}
.roundedBodyCornersWrapper {
/* center via .centerBlock in layout */
/* padding via .elemPadding in layout */
}
.roundedTextCornersWrapper {
padding-bottom: 2.0em; /* + a tad extra above .mainContent */
}
.headerImage {
/*
original size = 888px X 448px (55.5em X 28em)
*/
width: 75%;
width: auto\9; /* IE8 exception */
padding-bottom: 1.5em;
}
.centerBlock, .centerImage {
display: block;
margin-left: auto;
margin-right: auto;
}
.infoHeader {
font-family: Georgia, Helvetica;
font-size: 130%; /* 130% x the % in body */
color: #fff;
}
BTW, everything does not work as already described even when I have
<meta name="viewport" ...>
and
#viewport {
}
appropriately placed.
In the interests of total disclosure, I am no longer certain of what dimensions change when the window resizes or when zooming out/in occur. I see the GUI changes ...

Answer 1

Oh, for Heaven's Sake ...
body {
background-color: white; /* around oval */
margin: 1.0em;
font-size: 120%;
/*
min-width: 300px; // Oh ... for Heaven's Sake!!!
*/
}
WHY does the elimination of min-width eliminate my zooming problems??