Trouble with CSS Image Layout

I’m currently working on the portfolio project page. I’m trying to make two columns of three photos centered in the page, but I can’t figure out why my code isn’t working. Any suggestions would be appreciated!

Maybe something like the following is what you are looking to do?

.photos {
  text-align: center;
  width: 80%;
  height: 100vh;
  margin: auto;
  background-color: lightgrey;
  border: thin solid black;
}
img {
	width: 40%;
	margin: 2%;
  border: thin solid black;
}
1 Like

I had to take the height property out because the images didn’t stay in the container, but otherwise your code fixed my problem. I didn’t know you could use the text-align property for things other than text. Thanks!

You have not updated the Codepen with my suggestions yet, so I can not test this out. When I used the code, it did not cause this problem. Do you have a screenshot of this phenomenon when using height: 100vh?

I updated the codepen and here’s a screenshot

Interesting. What browser are you using and on what operating system?

Here is your Codepen when viewing from my pc, which is using Window 10 and latest version of Chrome.

I’m also using the latest version of chrome, but I’m running mac OS. I feel like that shouldn’t make a difference though, I’m really curious to know why.