The early web was flat. These days you have several ways to create a feeling of depth. One of these is relevant to the current discussion of boxes, and that is box-shadow. You provide a sequence of values to configure the shadow. Here the shadow is pushed right and down and is colored black:
Try pushing the shadow left and up. Try lightening the color.
Shadows are easy to overdo. Aim for subtle. You can add a blur factor as the third value in the sequence to soften the shadow:
The CSS standard doesn't precisely define how this factor influences the softness. Trying raising and lowering the number.
The shadow doesn't have to be pushed in any direction. The offsets may be 0:
In case you're a stickler for physics, unbiased shadows are not realistic. Shadows would only appear on all sides of an object if the light source was hovering over the object's center.
By default a box shadow is a drop shadow, which means the shadow appears behind the element. This makes the element appear to float above the content plane. Alternatively, you can create an inset shadow, which makes the element appear to be pushed into the content plane. This is done by prepending the values with the term inset, as is seen in this "well" of code:
Unbiased shadows are more reasonable for inset shadows. The rim of the well blocks ambient light from reaching the edges.
Try setting the padding to 0. Why was padding added?