According to Responsive Web Design, by Ethan Marcotte, there is a formula for converting pixel-based layouts to percentage-based layouts: target / context = result. The target is the desired width of an element. The context is typically the width of its parent element. The result is the percentage we can plug into our CSS.
If we look at our HTML inside the intro-content section, we can see the wrapper class and the two div tags inside of it, namely intro-content and go-premium, as shown in the following code snippet:
<section class="grouping"> <div class="wrapper"> <div class="intro-content"> <h1>Old Chompy</h1> <h2>Dedicated to sharks and other aquatic species</h2> <p>Lorem ipsum dolor sit amet...</p> </div><!-- ...
