How can I get rid of whitespace on the right side of my page?

I have a webpage that I’m trying to design but I’m stuck with persistant whitespace on the right side of the page. I have tried resetting the browser defaults but this has no effect on the page.
I have also tried to make sure that the parent elements all have a declared size but this too has had no impact.

Webpage:

html,
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.navbar {
  height: 5%;
  background-color: #181818;
}

.siteContainer {
  color: #ffffff;
  width: 100%;
  height: 100%;
  margin: 0;
}

.siteBody {
  height: 100%;
}

.searchArea {
  background-color: #181818;
}

.resultArea {
  background-color: #121212;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container siteContainer">
  <div class="row navbar">
    <div class="col col-2 ">
      Logo
    </div>
    <div class="col col-10 ">
      Navbar
    </div>
  </div>
  <div class="row siteBody">
    <div class="col col-2 searchArea">
      Search and CRUD
    </div>
    <div class="col col-10 resultArea">
      Results
    </div>
  </div>
</div>

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Youre using bootstraps container class which has fixed max widths (see https://getbootstrap.com/docs/5.1/layout/containers/).

What you want it container-fluid which fills 100% of the page.

html,
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.navbar {
  height: 5%;
  background-color: #181818;
}

.siteContainer {
  color: #ffffff;
  width: 100%;
  height: 100%;
  margin: 0;
}

.siteBody {
  height: 100%;
}

.searchArea {
  background-color: #181818;
}

.resultArea {
  background-color: #121212;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid siteContainer">
  <div class="row navbar">
    <div class="col col-2 ">
      Logo
    </div>
    <div class="col col-10 ">
      Navbar
    </div>
  </div>
  <div class="row siteBody">
    <div class="col col-2 searchArea">
      Search and CRUD
    </div>
    <div class="col col-10 resultArea">
      Results
    </div>
  </div>
</div>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating