<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<style type="text/css">
html, body, div.wrapper { width:100%; height:100% }
body { margin:0; padding:0 }
div.wrapper { position:relative; background-color:#e6e6e6 }
div.content { width:66%; min-height:100%; height:100% }
header { box-sizing:border-box; width:100%; height:10%; max-height:15%; padding:0.5rem; background-color:#43bb49; border-bottom-left-radius:0.5rem; border-bottom-right-radius:0.5rem }
div.table { display:table; width:100%; height:100% }
div.table-cell { display:table-cell; vertical-align:middle }
</style>
</head>
<body>
<div class="wrapper" align="center">
<div class="content" align="left">
<header><div class="table"><div class="table-cell">Test</div></div></header>
</div>
</div>
</body>
</html>
При увеличении Test вылезает далеко за рамки. Что делать, чтобы он не вылезал?
