Solution 1 :

You cannot start a class with a number

Also use a div instead

.screen {
  background-image: url("");
  background-size: 100;
  padding: 10px 0px 10px 0px;
  border: 10px;
  border-color: white;

img { background-color:black; height: 80px; margin-left:200px; margin-top:50px; border: 2px solid white;}
<div class="screen">
<img src=""  />

Solution 2 :

that might work if you change class to start with word like it sais on top answer
but correct way is make a div within it set a img like this

  <img src="./img.png"/>

you must use position relative in parent or else will set to window not div
so what happens is you create background then a img 90% of div then you set to center of div

Solution 3 :

you are missing border-style and probably background-position. As mplungjan told you already, class and id names should cannot have a number as a first letter (nor special characters) best is to name them in a way that it tells something (when you go through your code 6 month later, you will understand the purpose).

update from your comment

possible fix via background-clip or border-image, from your image which has a big area around the wooden structure , a waste of space.
over the image to draw shadows arund edges to see where it stands

  .img43screen {
  padding: 0 10px;
  vertical-align: middle;

.img43screen.a {
  background-image: linear-gradient(white, white), url("");
  background-repeat: no-repeat;
  background-clip: padding-box, border-box;
  background-position: center;
  background-size: 110;
  border-style: solid;
  border-width: 50px 10px;
  border-color: transparent;

.img43screen.b {
  padding: 30px 40px;
  border-image-slice: 100 281 100 263;
  border-image-slice: 80 280 80 280;
  border-image-width: 30px 30px 30px 30px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
  border-image-source: url("");

img:hover {
  filter: drop-shadow(0 0 3px);
<img src="" class="img43screen a" />

<img src="" class="img43screen b" />

Problem :

I’m trying to make a simple method for adding screenshots into the middle of written content, and I’m having trouble getting the effect that I want. I have a background of some wooden planks I want to apply to all the screenshots (which will be all the same size), then scale the screenshot down so the background looks like a frame of sorts, and add a small white border so that it looks like a photo attached to the planks. So I could do something like below
I feel like I’m on the right track, but I know I’m losing something in the understanding.

.43screen {
  background-image: url("");
  background-size: 100;
  padding: 10px 0px 10px 0px;
  border: 10px;
  border-color: white;
<img src="" class="43screen" />


Comment posted by mplungjan

I made you a snippet

Comment posted by G-Cyrillus

border: solid 10px white ? solid is missing here 😉

Comment posted by MarcusRaven86

When I do that it puts the border around the background image, not the inset image that I actually want the border on.

Comment posted by G-Cyrillus

@MarcusRaven86 okay, i think i see what you looked for. you may look at border-image or background-clip with a gradient to draw the inside area. both approach are added to the snippet updated.