Question: I would like to centre `.login` inside `body`. Currently everything looks as desired, however if I inspect it, I can see that is not actually in `body`'s area:

[![enter image description here](https://i.stack.imgur.com/1ZDKk.png)](https://i.stack.imgur.com/1ZDKk.png)

I could resolve it with:

```
.login {
 position: absolute;
 width: 100%;
 height: 100%;
}

```

But that will break the body. How do I fix this while keeping the element in the normal work flow?

Answer: 
Add this to your code:

```
html, body { height: 100%; }
.login { height: 100%; }

```
You dont need to use position:absolute, Use margin:0 auto instead of it

```
.login {
   width: 360px;
   margin:0 auto;
}

```