Help me with my portfolio project

[ahbabovicemin2005]

Pictures in my grid overflow, I don’t know why. They should be placed nicely, but they just overflow to the right of page. Could you take a look?

MWQZgry

[cw66786]

I do not know what the exact issue is but I was able to get them to display properly be changing the following:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 4rem;
  width: 100%;
  max-width: 1280px;
  margin: 0 10px;
    margin-bottom: 0px;
  margin-bottom: 6rem;
}

.project-title {
  font-size: 3.7rem;
  font-family: sans-serif;
  color: #D3D3D3;
  text-align: center;
}

#projects {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #222629;

[cw66786]

I believe the major part of the problem was that you had .project-tile set to
align-items: center;

I would make the changes i did in the browsers developer console see how you like them before changing your code.
I did something similar when i did this project but i set mine up as :

<projects>
<title container>
<h2></h2>
</title container>
<grid container>
</grid container>
</projects>

that being said your projects look very nice and I like your color scheme

[cw66786]

Ok so i got a few min free and went back and looked at your actual code instead of the developer console. If you simply change:

img {
position: relative;
height: 100%;
width: 100%;
}

It will give you the desired result

[ahbabovicemin2005]

Thank you very much man.
I kinda see my mistake now. Images were overlapping grid columns because they had no dimensions. They were in their origin dimensions. When I set their dimension to be 100% of grid column width, and 100% of grid row height, it fixed the problem. Thank you very much again.

[cw66786]

no problem happy to help. I’m not too much farther than you though so i did my best lol