All these HTML elements (div, p, span, nav, section, aside, etc.) could be considered containers, hence the title, and in this article I will talk about what css styles we can apply.

These containers are nothing more than HTML elements placed around text or other HTML elements. It can have edge, border and padding.

Below I posted an image in which I explained as simply as I could what these elements were that we talked about, namely margin, border and padding.

Container example

div {
    width: 400px;
    height: 250px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

Read more on: HTML container

#modal {
    border: 1px solid gray;
    border-radius: 3px;
    background: white url("gradient.png") ;
    background-repeat: repeat-y;
    padding-top: 20px;
}

<div id="modal">
<header><h1>Something Here</h1></header>
<p>Your content here...</p>
</div>

Creating full width (100% ) container inside fixed width container.

HTML

 <div class="container" style="width: 750px; margin: 0 auto;">

<div class="row-full">
     --- Full width container ---
</div>

</div>

CSS

 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}