Padded img element and border around it

I am working on my portfolio page and I have some troubles with borders.
Please see my codepen:

As you can see I want to wrap yellow border around img element which is a link to codepen project. I padded it 200px from the left. But then the border expands twice the width of img element outside of it. How to solve this?
I admit I’m not sure whether using “padding” was good choice for moving img element to the right.

border problem

Now I am thinking that using “padding” was a bad choice. I’ve tried to use "left: 200px: but it doesn’t do anything.

Ok, problem solved.

img {
  border: 1px solid yellow;
  width: 200px;
  position: absolute;
  left: 200px;

I’ve just learnt to use position: absolute

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.