Before
I want to change the div width of the “Info box” to the same width as the image and make borders around it. You can see in the image the div width is as same as the image size which is 300px. So I’m tending to change the div width but I can’t change it.
Just like this
code:
Html:

<div>
 <div class="project">
  <div class="grid-item-pro">
  <img src="Screenshot 2024-05-07 125757.png"
  width="300px"
  height="200px"
  >
  <div class="cv">
    <h7 class="cvcanhan">CV CÁ NHÂN</h7>
  </div>

  </div>
  <div class="grid-item-pro">2</div>
  <div class="grid-item-pro">3</div>  


  </div>
</div>

  

CSS:

.project {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item-pro {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;

}
.cvcanhan{
  background-color: red;
 
}