Disable zoom HTML CSS for playoff brackets - html

Question

JS Fiddle is here.
I found the CSS and HTML for a bracket generator. The problem is that when you zoom out the lines break. I've tried to convert the widths from specific sizes (e.g. 149px) to percentages (e.g. 15%) but to no avail.
Any idea?
CSS
.tournament4-wrap, .tournament8-wrap, .tournament16-wrap, .tournament32-wrap {
text-align: center;
}
/****** round 1 ******/
.round1-top, .round1-bottom {
float: left;
width: 150px;
height: 2em;
}
.round1-top {
line-height: 2.5em;
}
.round2-topwrap .round1-bottom {
width: 149px;
border-top: 1px solid #000;
border-right: 1px solid #000;
}
.round2-bottomwrap .round1-top {
width: 149px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
/****** round 2 ******/
.round2-top, .round2-bottom {
float: right;
width: 150px;
height: 4em;
}
.round2-top {
line-height: 6.5em;
}
.round3-topwrap .round2-bottom {
width: 149px;
border-top: 1px solid #000;
border-right: 1px solid #000;
}
.round3-bottomwrap .round2-top {
width: 149px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
.tournament4-wrap .round2-top {
border-bottom: 1px solid #000;
}
.round2-topwrap, .round2-bottomwrap {
float: left;
width: 300px;
height: 4em;
}
/****** round 3 ******/
.round3-top, .round3-bottom {
float: right;
width: 150px;
height: 8em;
}
.round3-top {
line-height: 14.5em;
}
.round4-topwrap .round3-bottom {
width: 149px;
border-top: 1px solid #000;
border-right: 1px solid #000;
}
.round4-bottomwrap .round3-top {
width: 149px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
.tournament8-wrap .round3-top {
border-bottom: 1px solid #000;
}
.round3-topwrap, .round3-bottomwrap, .tournament4-wrap {
float: left;
width: 450px;
height: 8em;
}
/****** round 4 ******/
.round4-top, .round4-bottom {
float: right;
width: 150px;
height: 16em;
}
.round4-top {
line-height: 30.5em;
}
.round5-topwrap .round4-bottom {
width: 149px;
border-top: 1px solid #000;
border-right: 1px solid #000;
}
.round5-bottomwrap .round4-top {
width: 149px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
.round4-topwrap, .round4-bottomwrap, .tournament8-wrap {
float: left;
width: 600px;
}
.tournament16-wrap .round4-top {
border-bottom: 1px solid #000;
}
/****** round 5 ******/
.round5-top, .round5-bottom {
float: right;
width: 150px;
height: 32em;
}
.round5-top {
line-height: 62.5em;
}
.tournament32-wrap .round5-top {
border-bottom: 1px solid #000;
}
.round5-topwrap, .round5-bottomwrap, .tournament16-wrap {
float: left;
width: 750px;
}
/****** round 6 ******/
.round6-top, .round6-bottom {
float: right;
width: 150px;
height: 32em;
}
.tournament32-wrap {
float: left;
width: 900px;
}
/****** styles for the winner column ******/
.winner3, .winner4, .winner5, .winner6 {
font-weight: bold;
font-style: italic;
}
.winner3 {
line-height: 8em;
}
.winner4 {
line-height: 16em;
}
.winner5 {
line-height: 32em;
}
.winner6 {
line-height: 64em;
}
HTML
<title>8 Player Tournament</title>
<div class="tournament8-wrap">
<div class="round4-top winner4">Winner</div>
<div class="round3-topwrap">
<div class="round3-top">Top finalist</div>
<div class="round2-topwrap">
<div class="round2-top">1-8 winner</div>
<div class="round1-top">#1 seed</div>
<div class="round1-bottom">#8 seed</div>
</div>
<div class="round2-bottomwrap">
<div class="round2-bottom">4-5 winner</div>
<div class="round1-top">#4 seed</div>
<div class="round1-bottom">#5 seed</div>
</div>
</div>
<div class="round3-bottomwrap">
<div class="round3-bottom">Bottom finalist</div>
<div class="round2-topwrap">
<div class="round2-top">2-7 winner</div>
<div class="round1-top">#2 seed</div>
<div class="round1-bottom">#7 seed</div>
</div>
<div class="round2-bottomwrap">
<div class="round2-bottom">3-6 winner</div>
<div class="round1-top">#3 seed</div>
<div class="round1-bottom">#6 seed</div>
</div>
</div>
</div>

Answer 1

UPDATED ANSWER
The problem is with the 149px widths. When you scale down, this is leading to a rounding error that is forcing items to wrap unexpectedly. It looks like this was done to account for the 1px border. Instead if you set the box model to border-box you don't need to worry about this -- the item's width includes its border size if any.
First set this:
.tournament8-wrap * {
box-sizing:border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
Then, set all of the items that are currently sized to width: 149px to 150px
Updated fiddle:
http://jsfiddle.net/11nLfa4g/6/