Solution to Problems that Beginners Encounter ~CSS~

Here are some problems I encountered while I was working on my project, and the solutions to them I got from my instructor and found through searching.

< How To Adjust Image Size >
When we want to align images in a row with the same height (and width), we use "object-fit: cover". But sometimes it won't work only by using it.
Here is the solution:
Set the width and the height of the images to 100%.
width: 100%;
height: 100%;
object-fit: cover;

I found several ways to darken the background images.
Here are some:
(1) Using ":before"
.hero {
width: 100%;
height: 100vh;
background: url("..(image url)..") no-repeat center center;
background-size: cover;
position: relative;
background-attachment: fixed;
}
.hero:before {
content: "";
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

(2) Using "Linear-gradient"
.container {
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5))
}

When I wanted to align data vertically, I could only think of using "table" or " ". We can use "grid" not only for images, but texts.
.data {
display: grid;
grid-template-columns: 2fr 1fr;
}

These problems might seem too trivial, but actually they are not to beginners like me and it takes so long to find the solutions.
So, I hope this would help someone who's also struggling with the same problems.