Image border overlapping div padding

I have some stupid problem but it bothers me quite a lot. I already tried some things but nothing works so maybe someone of you will have a soultion. I have a centered picture inside div and as you can see on the picture the border of the image on the right side overlapping a little bit the padding of the div. I tried different things but I canno't "push" the image to the left. Both img and div width have to be set as 300px. Overlapping border

and heres some code for img and div

img {
  width: 300px;
  height: auto;
  border: 2px solid rgba(115,186,155,.5);
  border-style: dotted;
  border-radius:8px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
    } 

#first {
border: 1px solid rgba(115,186,155);
padding:15px;
width: 300px;
}