How can I make an image to not overlap the div's border-CodePudding

I tried and searched a lot of sources, but didn't find anyone with this issue. Can you take a look at my code and example and tell me how can I make this image to fit inside that div. Thank you in advance! :)

`  https://codepen.io/RoyVoyTheBoy/pen/GRQKNZM   `

CodePudding user response：

You can use try display: flex.

.wrapper {
    height: fit-content;
    width: 75%;
    margin: 30px auto;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 0px 0px 1.5px 3px gray;
    margin-bottom: 200px;
    box-sizing: fit-content;
    display: flex;
}

CodePudding user response：

Quite a things need to be improved in your code.

<section id="detailsPage">
<div >
  <div >
    <img
      src="https://m.media-amazon.com/images/M/MV5BMWEwNjhkYzYtNjgzYy00YTY2LThjYWYtYzViMGJkZTI4Y2MyXkEyXkFqcGdeQXVyNTM0OTY1OQ@@._V1_.jpg">
  </div>
  <div >
    <div >
      <h1>Uncharted</h1>
      <div>
        <h3>Main Actor: Tom Holland</h3>
        <h4>Genre: Action, Adventurous</h4>
        <h4>Date: February 7, 2022</h4>
      </div>
      <p>In the film, Nathan Drake is recruited by Victor Sullivan in a race against corrupt billionaire Santiago
        Moncada and mercenary leader Jo Braddock to locate the fabled treasure of the Magellan expedition</p>
    </div>
  </div>
</div>

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  /* height: auto; */
  width: 75%;
  margin: 30px auto;
  border-radius: 7px;
  box-shadow: 0px 0px 1.5px 3px gray;
  margin-bottom: 200px;
  box-sizing: border-box;
  display: flex;
}

.albumCover {
  /* float: left; */
  /* height: 100%; */
  /* width: auto; */
  margin-right: 20px;
  display: flex;
}

.albumCover img {
  border-radius: 7px 0 0 7px;
  max-height: 400px;
  max-width: 1000px;
  position: relative;
  height: fit-content;
  width: auto;
}

.albumText {
  padding-left: 10px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}

.albumText * {
  margin-bottom: 20px;
}

.albumText h1 {
  color: gainsboro;
  font-weight: bolder;
  font-size: 28px;
}

.albumText h3 {
  /* margin: 8px 0 47px 18px; */
  font-size: 18px;
  color: gray;
  letter-spacing: 0.2em;
  /* margin-bottom: 0; */
}

.albumText h4 {
  /* margin: 8px 0 10px 18px; */
  font-size: 16px;
  color: #9F9991;
  letter-spacing: 0.2em;
}

.albumText h5 {
  margin: 8px 0 10px 14px;
  font-size: 16px;
  color: white;
}

.albumText>p {
  /* height: auto; */
  /* width: 100%; */
  color: #9F9991;
  line-height: 1.6em;
  font-size: 18px;
  font-weight: bold;
  margin-right: 20px;
}

.actionBtn {
  display: flex;
  text-align: center;
  left: auto;
  top: auto;
  right: 0;
  bottom: 0;
}

.actionBtn>a {
  width: 200%;
  height: 50px;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  display: inline;
  align-items: center;
  justify-content: center;
  background-color: #1b2845;
  background-image: linear-gradient(315deg, #45a29e 0%, #0d324d 74%);
  background-size: 200% 100%;
  background-position: left;
  background-repeat: no-repeat;
  transition: 500ms;
  color: white;
  font-family: "Lato";
  font-size: 20px;
  margin-bottom: 10px;
  margin-top: 20px;
  padding: 10px;
  text-decoration: none;
  margin-right: 50px;
}

.actionBtn>a:hover {
  background-position: right;
}

.albumText>div:first-of-type {
  margin-left: 40px;
  margin-bottom: 0;
}