How to Get Rid of The Gap at The Edge of The Page

How can I get rid of the gap at the edge of the page?

Add the following CSS margin reset:

html,
body {
    margin: 0;
}

Snippet below:

html,body {  margin: 0;}
#body {  padding: 0px;  border: 0px;  margin: 0px;  width: 100%;  height: 100vh;}
#mainPage {  height: 100vh;  width: 100%;  background-color: #2469ff;  padding: 0px;  border: 0px;  margin: 0px;}
#navBar {  height: 70px;  width: 100%;  Background-color: #1f1f1f;  padding: 0px;  border: 0px;  margin: 0px;}

<body>  <div id="mainPage">    <div id="navBar">    </div>    <div id="leftPanel">    </div>  </div></body>

How can I remove the gap from the top of page?

After troubleshooting and looking for hidden or erroneous UTF characters we figured out that the cause was an un-closed meta charset tag.

<meta charset="UTF-8"/>

How to remove white gap between container and the edge of viewport?

Your mail input in the footer is to big for small devices and overflows the page.

You can fix this by setting the width of the input to 100% and putting a line breake between the input and the button. Or you can add flex-direction: column; to .main-footer__form for screen widths smaller 700px.

But probably the best way would be to remove position: absolute; from the .main-footer__form and set the rowspan of the cell to 3. You should combine this with flex-direction: column; for screens smaller 600px.

.main-footer__form {  display: flex;}
@media screen and (max-width: 600px) {  .main-footer__form {    flex-direction: column;  }}

<table class="main-footer__table">  <!-- ... -->  <td rowspan="3" style="vertical-align: top;">    <form action="#" class="main-footer__form">      <input type="email" name="mail">      <input type="submit" name="submit" value="→">    </form>  </td>  <!-- ... --></table>

How do I get rid of the white space at the top of my web page?

Your whitespace is coming from the top margin of 10px on #inner-container. See this JSFiddle with the top margin changed to 0px: https://jsfiddle.net/rcz6ksft/.

#inner-container {
    margin: 0px 10px 10px 10px;
}

How to remove white gap between navbar and header?

You need to position the div .side-bar explicitly at the top of its parent using top: 0;. (Note this di is already positioned absolute)

.side-bar{
  top: 0;
  }

Snippet below

@import url(http://fonts.googleapis.com/css?family=Lato);.container {  width: 800px;  overflow: hidden;  display: inline-block;  margin-top: 0px;}
.side-bar {  background: #74AFAD;  position: absolute;  height: 100%;  width: 200px;  color: #fff;  transition: margin-left 0.5s;}
.side-bar ul {  list-style: none;  padding: 0px;}
.side-bar ul li.menu-head {  font-family: 'Lato', sans-serif;  padding: 20px;}
.side-bar ul li.menu-head a {  color: #fff;  text-decoration: none;  height: 50px;}
.side-bar ul .menu-head a {  color: #fff;  text-decoration: none;  height: 50px;  margin: 0;}
.side-bar ul .menu li a {  color: #fff;  text-decoration: none;  display: inline-table;  width: 100%;  padding-left: 20px;  padding-right: 20px;  padding-top: 10px;  padding-bottom: 10px;}
.side-bar ul .menu li a:hover {  border-left: 3px solid #ECECEA;  padding-left: 17px;}
.side-bar ul .menu li a.active {  padding-left: 17px;  background: #D9853B;  border-left: 3px solid #ECECEA;}
.side-bar ul .menu li a.active:before {  content: "";  position: absolute;  width: 0;  height: 0;  border-top: 20px solid transparent;  border-bottom: 20px solid transparent;  border-left: 7px solid #D9853B;  margin-top: -10px;  margin-left: 180px;}
.content {  padding-left: 200px;  transition: padding-left 0.5s;}
.active>.side-bar {  margin-left: -150px;  transition: margin-left 0.5s;}
.active>.content {  padding-left: 50px;  transition: padding-left 0.5s;}
#logout_sidebar {  position: absolute;  display: inline-block;  bottom: 0;  width: 100%;}
@media screen and (max-width: 768px) {  .row-offcanvas {    position: relative;    -webkit-transition: all 0.25s ease-out;    -moz-transition: all 0.25s ease-out;    transition: all 0.25s ease-out;    width: calc(100% + 220px);  }  .row-offcanvas-left {    left: -220px;  }  .row-offcanvas-left.active {    left: 0;  }  .sidebar-offcanvas {    position: absolute;    top: 0;  }}
#sidebar {  width: inherit;  min-width: 220px;  max-width: 220px;  background-color: #f5f5f5;  float: left;  height: 100%;  position: relative;  overflow-y: auto;  overflow-x: hidden;}
#main {  height: 100%;  overflow: auto;}
.side-bar {  top: 0;}

<!DOCTYPE html><html>
<head>  <meta charset="utf-8">  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">  <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>  <script type="text/javascript" src="js/main.js"></script>  <link rel="stylesheet" type="text/css" href="css/navbar.css">
  <title> Bagus Gamestore Admin Dashboard</title></head>
<body>  <div class="container">    <div class="row">      <div class="wrapper">        <div class="side-bar">          <ul>            <li class="menu-head">              ADMIN PANEL <a href="#" class="push_menu"><span class="glyphicon glyphicon-align-justify pull-right"></span></a>            </li>            <div class="menu">              <li>                <a href="#" class="active">Dashboard <span class="glyphicon glyphicon-dashboard pull-right"></span></a>              </li>              <li>                <a href="#">User List<span class="glyphicon glyphicon-user pull-right"></span></a>              </li>              <li>                <a href="#">Add New Product<span class="glyphicon glyphicon-plus pull-right"></span></a>              </li>              <li>                <a href="welcome.php">Go to Website <span class="glyphicon glyphicon-globe pull-right"></span></a>              </li>            </div>
            <div class="menu ">              <li id="logout_sidebar">                <a href="logout.php">Logout<span class="glyphicon glyphicon-log-out pull-right"></span></a>              </li>            </div>          </ul>        </div>        <div class="content">          <!-- show user list -->          <!-- end of show user list-->
        </div>      </div>    </div>  </div></body>
</html>