Image Not Staying Within Parent Div-CodePudding

I am trying to make some responsive cards. I have the cards completed and spaced out properly. On the front of the cards I want an image on the top of the cards and a title in the middle. The title is fine and the image is fine except for the right side of the image. Here is the CSS code for the image (image is in an img tag in HTML page with a class of "image"):

div .image {
    padding: 5%;
    height: 45%;
    width: 100%;
}

The right side for some reason is ignoring the padding and sticking out of the card parent div. Any ideas why?

CodePudding user response：

did you already set div's width? also as far i know is no need to set image's height if you already set it's width to 100%
anyway here some example

div { width: 200px; height: 150px; padding: 6px; }
div img { width: 100%; }

CodePudding user response：

You set the width to be 100% and padding 5%. Make sure you have:

box-sizing: border-box;

for the parent. Also without the full example of code, hard to answer. Can use overflow: hidden; on the parent to hide that part sticking out.