How do I make an edge stuck to the screen?

Question

I was trying to make a border glued to the sides of the screen how represents the picture below :

Picture of how i want

I have html code, but i don´t know if i´m doing in the best way. Can you guys help me?

DIV Rectangle HTMl

<div class="content">
    This is a rectangle!
 </div

DIV Rectangle CSS:

.content {

   width:100%;
   min-height: 150%;
   border:1px solid #FFFF;
   border-width: 100%;
   background-color: #FFFF;
   border-radius: 5px;
   padding-bottom: 50%;

}

It is like this:

Picture of how it is

I want to remove this spacing between border and screen, is it possible to do that?

Answer 1

There are 2 solutions:

1. You can remove your parent block paddings (set it to 0)

2. You can wrap your .content with an additional block and set its margins to negative values (adjust numbers to fit your layout):

   .wrapper { margin: 0 -5px; }

Answer 2

Divs are block-level elements and will take the full width that is available. So, the issue isn't actually the .content div. It's likely that the body has a margin still set on it. It will probably take care of it if you add:

body { margin: 0; }

This is just a guess that it's on the body, but really it's whatever parent or ancestor has margin or padding.

Answer 3

Same problem here

      *,html {
    margin:0;
    padding:0;  
    }

Hope this helps, "*" will set the whole page to 0