How to locate pieces in css?

I am having problem while locating the text and border to the spot where I want can you just check. I want to put “img-caption” part to the center but I cant. I got stuck
https://codepen.io/CCtumu/pen/qGvzQL

Welcome to the forum umutcan.

You have to align the content of your div container to the center with the property : " text-align: center", in this case the container is the div with the id=“img-div”

First of all put your css code in the right place in the css place ,
you are targetting all div like this

div{
display: inline-block;
}

so that img-caption div is also inline-block , I don’t know why you give them all
display inline-block;
but to solve your problem you have to bring img-caption back to its noraml display wich is display block by writting

#img-caption {
 display : block;
}

and then change the margin right and left to auto
you can do that
by setting the margin like this

margin: 30px auto;

30px for top and bottom and auto for right and left