Something like glow next to div - html

Question

Can someone tell me why is there something like white glow/shadow next to my div (on the right side)? At first, I thought that border is smaller than div, but it's not that. This only happens when I use dark color as background.
Maybe you won't see, but take a close look on image below.
:
Here is a close up of the line:
Here is the code:
#container {
margin: 20px auto;
padding: 10px;
border-top: 5px solid #000000;
background-color: #990000;
width: 600px;
}

Answer 1

That is simply the anti-alias effect, caused by the image tool, or monitor, you use.
When have high contrast color next to each other, this often happens.
Turn of anti-alias when doing the screen dump/paste into the image tool and it will be gone

Answer 2

Here is the code you put in and when I run it on here I definitely don't see a white line. Click run snippet and then full page. Then zoom in as much as possible. I think it is gone meaning that the line is probably caused by your browser or something else other than the code.
I might try using a css normalizer. Good Luck!
#font-face {
font-family: Myriad Pro;
src: url('fonts/MyriadPro-Regular.otf');
}
body {
background-color: #DEDEDE;
font-family: Myriad Pro;
}
a {
text-decoration: none;
color: #1738E0;
}
textarea:focus, input:focus, button:focus {
outline: none;
}
#container {
margin: 20px auto;
padding: 10px;
border-top: 5px solid #000000;
background-color: #990000;
width: 600px;
}
<div id="container">
<div id="yay">
Ugly thing...
</div>
</div>