Currently, I am following a portfolio tutorial and have encountered an issue. The HTML code seems to be correct, however, the CSS part does not seem to affect the output in my case. I'm unsure of what could be causing this discrepancy. If anyone has any insights, please let me know.
If you'd like to take a look at my repository, here is the link: Porfolio react app
Below is the snippet of my HTML code:
<h3 className="font-bold">Take a look of our projects</h3>
<hr />
<div className="row">
{projectsdata.map(project => {
return <div className="col-md-4">
<div className="position-relative project">
<img src={project.image} alt='' />
</div>
</div>
})}
</div>
And here is the CSS code snippet provided:
[.projects-intro .primary-button{
background-color: blue;
color: white;
font-weight: bold;
}
.project{
padding: 20px ;
border: 1px solid rgba(0, 0, 0, 0.486);
}
.project img{
height: 220px !important;
width:100% !important;
}]
This is the expected outcome:Image
However, the actual result looks like this:Image