Right margin not showing up

HTML-CSS
1

Hi!
I am trying to build a tribute page with the following code, which just gives a nice grey background to the content I’m going to fill in it.
Everything is working fine except that the right margin is not showing up in the web page. I’ve set margin-right to the same value as margin-left, and left margin is showing up, but right margin isn’t.
Please help me out here, I’m sharing the code that I’ve written so far:

  <style>
    #outer{
      position:absolute;
      background:rgb(232,232,232);
      margin-left:5px;
      margin-right:5px;
      margin-top:25px;
      margin-bottom:25px;
      height:100%;
      width:100%;
      border-radius:2%;
    }
</style>
</head>

<body>
  <div id="outer">
  </div>
</body>
type or paste code here
2

I am not that experienced, but I started to play with your code, because it did the same in my browser I couldn’t figure out why.

This is how I made it work, by removing position, height and width

<style>
    #outer{
      background:rgb(232,232,232);
      margin: 25px 5px;
      border-radius:5px;
    }
</style>

and giving the div some content (a p element with some lorum ipsum).

Addendum: I believe the width attribute refers to the parent element. So if you add margins to your div and then add width equals 100% of the parent element (in this case body) you get into trouble.

3

I would think because it’s absolutely positioned that you’d want to use top/bottom/left/right.

#outer {
      position:absolute;
      background:rgb(232,232,232);
      top: 25px;
      left: 5px;
      right: 5px;
      bottom: 25px;
      border-radius:2%;
    }

All divs contained within this will have a relative position if you use % from that point on. See if that does what you want.

4

Margin will not work after use absolute.

5

It’s highly unlikely that you actually want to use position absolute for this. Although we have not been given much context.

Can you link to your project instead so we can see how it is you want to use this?