CSS CSS Layout Basics Getting Started with CSS Layout Centering Page Content and Creating a Full-width Header

Barry Cherry
seal-mask
.a{fill-rule:evenodd;}techdegree
Barry Cherry
Front End Web Development Techdegree Student 3,395 Points

with the div container, why is the div put in as a child element to the <header> if we are going to edit the header?

If we are going to edit the header, shouldn't it have been:

                <div class="container">
                    <header class="main-header">
                       <h1 class="name"><a href="#">Best City Guide</a></h1>
                       <ul class="main-nav">
                        <li><a href="#">ice cream</a></li>
                        <li><a href="#">donuts</a></li>
                        <li><a href="#">tea</a></li>
                        <li><a href="#">coffee</a></li>
                    </ul>
                   </header>
                </div>

2 Answers

Steven Parker
Steven Parker
203,995 Points

The div inside provides a convenient target for styling to provide margins and centering for the inner elements, while still allowing the header itself cover the full width of the window.