Not much of an answer, but here `tis.
Comments at the top of the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>percent widths</title>
<!--
http://www.sitepoint.com/community/t/designing-with-percentages/203029
jackweb
Sep 25,2015 7:23 AM
1. The majority of percentage width problems that we see around here involve people using percent width inappropriately, such as to applying {width:100%} to a div (a block object) that by default uses the full available width, or or forgetting that padding and borders add to the percent width unless box-sizing:border-box has been applied.
2. Designing a responsive page is at least a two step process. Breakpoints are added where variable widths alone do not alter the layout enough to adapth to a smaller/larger width.
3. Nested containers, especially those with percent widths that shrink automatically, are really not a problem because they quickly become self-limiting... impractical... the road to realizing this is quite short.
4. Custom designs necessarily involve more trial-and-error steps than "machine generated" layouts or grids.
5. You sound impatient. Good luck doing most anything perfectly "the first time".
-->
<style type="text/css">
.outer,
.midder,
.inner {
width:70%;
padding:50px 0;
margin:0 auto;
outline:1px solid red;
}
</style>
</head>
<body>
<div class="outer">
<div class="midder">
<div class="inner">
</div>
</div>
</div>
</body>
</html>