Right page border missing / right edge overflowing

[brianagarelli]

Hi there,

I've added a page border using CSS to my site. However, the right edge is not showing? After looking a bit closer, it seems like the right side of my site is not flowing properly to the edges of my screen (there's a bit more space on the left than there is on the right). Here's a screenshot for reference.

https://www.dropbox.com/s/14dgq5uljhocu4p/Screenshot 2019-02-13 12.04.30.png?dl=0

Thanks!

[mariusjopen]

Dear @brianagarelli

can you post a link to your website?

Then we can have a look :-)

Best!

Marius

[brianagarelli]

Hi Marius, thanks for getting back to me! My website is at www.brianagarelli.com

Thanks,

[mariusjopen]

Dear @brianagarelli
I would not use this way.

I would build 4 boxes with CUSTOM HTML.
With CUSTOM CSS I would position them fixed to build the frame.

Best!

Marius

[brianagarelli]

Thanks @mariusjopen

Any idea how to avoid having the content scroll on top of the border color? I'm using this for Custom HTML:

<div class="border"></div>

And this in Custom CSS:

body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.border {
position: fixed;
top: 0;
left: 0;
border: 12px solid #000;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}

Thanks!

[edgrbnz]

Well I guess it’s because css-borders always add to the element. So the div gets bigger – If you add 15px to one side it will push the other side out of the viewport – That’s why you don’t see the border on the right side and probably wouldn’t see it on the bottom if there were no footer.

If you set the body width to roughly 98% you can see the border on the right. I wouldn’t consider this a clean solution though…

You could try adding box-sizing: border-box; to your .border class as written over here and see if that does the trick.

[brianagarelli]

@edgrbnz That worked! Thanks so much :)

[mariusjopen]

Dear @brianagarelli
great answer @edgrbnz .

Best!

Marius