Semantic-UI: Why is the Body not the same viewport size?

Question

Please take a look at my Hello World-esque application, built with Semantic-UI.

I frequently use Semantic-UI, I like it more than Bootstrap, but I have noticed this consistent issue at the edges. The viewport has some sort of excess margin, notice the bottom of the webpage (blank space), and the right of the web page (more blank space).

I've been experimenting with setting the width/height of html/body to 100%, to no avail.

Is this a Semantic-UI issue, or something else in general? Any suggestions to correct this CSS?

Answer 1

It is because of the ui grid property which pulls content outside its area due to negative margin. Try setting it to 0.

.ui.grid {
  margin: -1rem; // Change to 0
}

The best practice is to wrap the ui grid inside a container. I am not sure why .container CSS code is missing in your site but they have it in Docs.

Semantic UI Docs The grid is wrapped inside .main.container which has a width set.

Answer 2

The problem appears bcz of the default margin of "ui grid". To Fix it just add "padded" class to the "ui grid" element. Just like this:

<div class="ui grid padded">
  <!-- your columns -->
</div>

Answer 3

if you set

 .ui.grid {margin:0}

it will work

Answer 4

As Manoj hinted, the solution according to the docs for the main grid is

<div class="ui grid container">
  <div class="four wide column">
    <!-- ... -->
  </div>
  <!-- ... -->
</div>