title: How to remove extra empty space and scroll bar at the bottom of my html page?
body: <p>I am trying to remove the empty space at the bottom as well as the scroll bar on the side of my html page with css.</p>
  <p>I want for the page to adapt to the screen without adding that extra space at the bottom of the page/and scroll bar on the side.</p>
  <p>I have set both margin and padding to 0 in the html and set the html and body to 100, but still getting empty space at the bottom.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Lato&amp;display=swap');
  * {
    margin: 0;
    padding: 0;
    /*    border: thick solid blue;*/
    font-family: 'Roboto', sans-serif;
  }
  
  html {
    height: 100%;
    border: thick solid yellow;
  }
  
  body {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    border: thick solid red;
    /*    background-color: #1d293e;*/
  }
  
  
  /*BUTTON BACKGROUND COLORS*/
  
  .header_right_container_inner_center_button,
  .header_right_container_inner_right_button {
    background-color: #FF0000;
  }
  
  
  /*BUTTON HOVER COLORS*/
  
  .header_right_container_inner_right_button:hover,
  .header_right_container_inner_center_button:hover {
    background: #F23D3D;
  }
  
  
  /* BUTTON FONT COLORS*/
  
  .header_right_container_inner_center_button,
  .header_right_container_inner_right_button {
    color: white;
  }
  
  a {
    text-decoration: none;
  }
  
  .logo {
    width: 120px;
    border-radius: 50%;
  }
  
  
  /* HEADER START */
  
  header {
    display: flex;
    /*    border: thick solid red;*/
    justify-content: center;
    border-bottom: thin solid black;
    padding: 9px;
  }
  
  
  /* HEADER LEFT SIDE */
  
  .header_left_container {
    display: flex;
    flex: 1;
    /*    border: thick solid yellow;*/
    justify-content: center;
  }
  
  .header_left_container_inner_left {
    /*    border: thick solid green;*/
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
  }
  
  .header_left_container_inner_right {
    /*    border: thick solid green;*/
    display: flex;
    flex: 5;
    align-items: center;
    justify-content: flex-start;
  }
  
  
  /* HEADER RIGHT SIDE */
  
  .header_right_container {
    display: flex;
    flex: 1;
    /*    border: thick solid yellow;*/
    justify-content: center;
  }
  
  .header_right_container_inner_left {
    display: flex;
    /*    border: thick solid green;*/
    flex: 4;
    justify-content: center;
    align-items: center;
  }
  
  li {
    /*    display:inline;*/
    padding: 10px;
  }
  
  a {
    color: black;
  }
  
  .header_right_container_inner_left_list {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    list-style-type: none;
  }
  
  .header_right_container_inner_center {
    display: flex;
    /*    border: thick solid green;*/
    flex: 1;
    justify-content: center;
  }
  
  .header_right_container_inner_center_button {
    display: flex;
    align-items: center;
    /*    background-color: #E00000;*/
    border: 1px solid #e00000;
    border-radius: 6px;
    padding: 0 25px;
    margin-left: 12px;
    /*    color: white;*/
    font-size: 15px;
    font-weight: 333;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    resize: none;
    outline: none;
  }
  
  .header_right_container_inner_right {
    display: flex;
    /*    border: thick solid green;*/
    flex: 1;
    justify-content: center;
  }
  
  .header_right_container_inner_right_button {
    display: flex;
    align-items: center;
    /*    background-color: #E00000;*/
    border: 1px solid #e00000;
    border-radius: 6px;
    padding: 0 25px;
    margin-left: 12px;
    /*    color: white;*/
    font-size: 15px;
    font-weight: 333;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    resize: none;
    outline: none;
  }
  
  select.select_city_header {
    border: 1px solid #fff;
    /*    background-color: rgba(255,255,255,.5);*/
    padding: 5px;
    background-color: white;
    color: black;
  }
  
  .main_dashboard_container {
    display: flex;
    color: white;
    /*border: thick solid red;*/
  }
  
  .left_navbar {
    height: 100vh;
    flex: 1;
    /*border: thick solid green;*/
    background-color: #1d293e;
  }
  
  .right_content {
    flex: 4;
    /*border: thick solid yellow;*/
  }
  
  .dashboard_buttons {
    font-family: 'Lato', sans-serif;
    padding: 12px 50px;
    font-size: 16px;
    font-weight: 500;
    border-bottom: thin solid black;
    cursor: pointer;
    background-color: #1d293e;
  }
  
  .dashboard_buttons:hover {
    background-color: #39CCCC;
    color: white;
  }
  
  .right_content {
    background-color: white;
  }
  
  .ul_flex {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;script src="https://kit.fontawesome.com/99c0db90d1.js" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;link href="/css/all.css" rel="stylesheet"&gt;
    &lt;!--load all styles --&gt;
    &lt;title&gt;Index&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;! -- HEADER START --&gt;
    &lt;!--############################################################################
  ################################################################################
  ################################################################################
  ################################################################################--&gt;
    &lt;header&gt;
      &lt;! -- HEADER LEFT SIDE CONTAINER START --&gt;
      &lt;div class="header_left_container"&gt;
        &lt;div class="header_left_container_inner_left"&gt;
          &lt;img class="logo" src="images/logo.png" alt=""&gt;
        &lt;/div&gt;
        &lt;div class="header_left_container_inner_right"&gt;
          &lt;form action=""&gt;
            &lt;select class="select_city_header" name="emirate" id="emirate" style="border: 0;"&gt;
              &lt;option value="dubai"&gt;Dubai&lt;/option&gt;
              &lt;option value="abu_dhabi"&gt;Abu Dhabi&lt;/option&gt;
            &lt;/select&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;! -- HEADER LEFT SIDE CONTAINER STOP --&gt;
      &lt;! -- HEADER RIGHT SIDE CONTAINER START --&gt;
      &lt;div class="header_right_container"&gt;
        &lt;div class="header_right_container_inner_left"&gt;
          &lt;ul class="header_right_container_inner_left_list"&gt;
            &lt;li&gt;&lt;a href="#" style="text-decoration: none;"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" style="text-decoration: none"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" style="text-decoration: none"&gt;Projects&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" style="text-decoration: none"&gt;Team&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" style="text-decoration: none"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="header_right_container_inner_center"&gt;
          &lt;button class="header_right_container_inner_center_button"&gt;Login&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="header_right_container_inner_right"&gt;
          &lt;button class="header_right_container_inner_right_button"&gt;Place Your Ad&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;! -- HEADER RIGHT SIDE CONTAINER STOP --&gt;
    &lt;/header&gt;
    &lt;! -- HEADER STOP --&gt;
    &lt;!--############################################################################
  ################################################################################
  ################################################################################
  ################################################################################--&gt;
    &lt;div class="main_dashboard_container"&gt;
      &lt;div class="left_navbar"&gt;
        &lt;div class="sub"&gt;
          &lt;ul class="ul_flex"&gt;
            &lt;li class="dashboard_user_widget"&gt;&lt;span class="span" style="min-height:350px;"&gt;&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
            &lt;li class="dashboard_buttons"&gt;&lt;i class="fas fa-map-marker-alt" style="padding-right:9px;"&gt;&lt;/i&gt;Dashboard&lt;/li&gt;
            &lt;li class="dashboard_buttons"&gt;&lt;i class="far fa-user" style="padding-right:9px;"&gt;&lt;/i&gt;Profile&lt;/li&gt;
            &lt;li class="dashboard_buttons"&gt;&lt;i class="far fa-list-alt" style="padding-right:9px;"&gt;&lt;/i&gt;My Properties&lt;/li&gt;
            &lt;li class="dashboard_buttons"&gt;&lt;i class="far fa-heart" style="padding-right:9px;"&gt;&lt;/i&gt;Messages&lt;/li&gt;
            &lt;li class="dashboard_buttons"&gt;&lt;i class="fas fa-cogs" style="padding-right:9px;"&gt;&lt;/i&gt;Settings&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="right_content"&gt;Content Here&lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So basically: how to make sure that the page will take the shape and size of the screen without adding any extra space at the bottom/and scroll bar on the side?</p>