How do I make a container fill the whole page? Also to be responsive

Question

I have different sections like "About me", "Contact", "Photo gallery" etc, and I want that when I open the site, the "About me" container to be displayed on the whole page, to fill the page without any content from the next section to appear.

<div class="container-fluid bg-2 text-left">
 <div id="About me">
  <h1 class="margin">About me</h1>
  <p> My text here</p>
 </div>
</div>

I have the "container-fluid" class for every container with content in the index file.

.container-fluid {
  padding-top: 70px;
  padding-bottom: 70px;
}

Any idea would be greatly appreciated!

Answer 1

That should addapt to the width of the browser at every state.

.container-fluid {
width:100%
padding:70px 0px 70px 0px;
}

Answer 2

You could use viewport relative units .

.example {
  min-height: 100vh;
  min-width: 100vw;
}

Answer 3

give the about container a height:100vh; width:100%; height:100vh; width:100%;

Answer 4

 .container-fluid {
     width:100%
     padding:70px 0px 70px 0px;
     margin :0;
  }

If above code not work write !important as like padding:70px 0px 70px 0px!important; Sometimes old style not override by new style so you make it important by writing above statement.