Now, in some cases, you may not want to use a container and that is totally fine. An example of this would be if you want a full width layout but you don't want the default left and right padding. You may have an image banner that you want to stretch to the full width of the browser with no padding. In this case, just remove the <div> with the container class on it.

It is perfectly fine to use multiple containers on a single page template. The containers are CSS classes, so they are reusable. You may want to do this on longer page layouts, perhaps a landing page design, where you have multiple large regions. Another example is using a container to wrap your footer. If you are using a template system like Harp, you'll want to create a footer partial. You can make the footer component more self contained by giving it its own container. Then you don't have to worry about closing a container <div> in the footer that was opened in a page template or even the header. I would recommend using multiple containers to make your designs more modular and easier to manage by multiple users. Let's take a quick look at how you would structure a basic page with multiple containers:

<div class="container"> 
   <!-- header code goes here, harp partial name would be _header.ejs //--> 
</div> 
 
<div class="container"> 
   <!-- template code goes here, harp file name would be index.ejs //--> 
</div> 
 
<div class="container"> 
   <!-- footer code goes here, harp partial name would be _footer.ejs //--> 
</div> 

We have three separate files there and using a container class for each makes each section more modular. You also don't have to worry about opening a <div> in one file then closing it in another. This is a good way to avoid orphan closing </div> tags.