Personal Portfolio Webpage - Need help making the thumbnails line up horizontally

Tell us what’s happening:
Describe your issue in detail here.
I’m trying to make the project thumbnails line up horizontally instead of vertically. I tried using flex box and grid but neither corrected my problem. Does anybody know what the problem is?

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav id="navbar">
    <a class="nav-link" href="#About">About</a><label id="About"></label>
    <a class="nav-link" href="#Projects">Projects</a><label value="Projects" id="Projects"></label>
    <a class="nav-link" href="#Contact">Contact</a><label value="Contact" id="Contact"></label>
    </nav>   

  <section id="welcome-section">
  <h1> Hello I am Milan Bryant <h1>
  <h2>a Web Developer</h2>
  </section>

  <section id="projects">
  <p>These are some of my projects</p>
    <div class="project-tile">
      <a href="https://codepen.io/milcb/full/MWVmPrg"></a>
      <img src="https://codepen.io/milcb/pen/MWVmPrg/image/small.png">      </div>      <div class="project-tile">        <a href="https://codepen.io/milcb/full/jOzwRYL"></a>        <img src="https://codepen.io/milcb/pen/jOzwRYL/image/small.png">      </div>      <div class="project-tile">        <a href="https://codepen.io/milcb/full/jOzwRva"></a>        <img src="https://codepen.io/milcb/pen/jOzwRva/image/small.png">      </div>      <div class="project-tile">        <a href="https://codepen.io/milcb/full/vYRZMaE"></a>        <img src="https://codepen.io/milcb/pen/vYRZMaE/image/small.pgn">      </div>      </section>    

    <section id="contacts"> 
 <div class="contacts">Contact Me</div>
 <a id="profile-link" href="https://github.com/Milcb" target="_blank" class>Linkedin</a>
 <a id="profile-link" href="https://github.com/Milcb" target="_blank" class>Github Profile</a>
   
 </section>
    </div>
  </body>
</html>
/* file: styles.css */
body{overflow:scroll}
/* WELCOME SECTIONS EDITS*/
#welcome-section{background:#889966;
overflow:hidden;
height:calc(100vh);
width:100%;
top:0;
text-align:center; }

h1,h2{color:white;
}

h1{font-size:40px;
padding-top:20%;}
h2{font-size:30px;}

/* NAV BAR EDITS*/
#navbar{
position:fixed;
top:0;
background:#993311;
width:98%;
height:10%;}

#navbar a{
float:right;
display:block;
color:white;
text-align:center;
padding:12px 14px;
font-size:25px}

/*PROJECT EDITS*/
p{font-size:30px;
text-align:center; 
color:#889966}

.project-tile{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 2rem;
width: 100%;
max-width: 1280px;
margin: auto;
margin-bottom: 2rem;
}

.project-tile img{
width: 55%;
height: 150px;
object-fit: cover;
margin-top: 2px;
padding: 0 2px;
border-radius: 10px;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
max-width: 100%;}

@media (max-width: 800px) {
#gallery img {
  width: 50%; }
}

@media (max-width: 800px) {
#gallery img {
  width: 100%;
}
}

/*********CONTACT EDITS***********/
#contacts{background:#889966;
text-align:center;
width:100%;
height:calc(100vh);
}

.contacts{font-size:40px;
color: white;
margin:auto;
padding-bottom:100px;}

#profile-link{
color:white;
font-size:25px;
padding:50px;
;}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

I would recommend using either flexbox or grid. Why don’t you try again with one of them and if it doesn’t work then paste your CSS so we can see what you tried and help you fix it.

I posted the CSS section with flex instead of grid below. It didn’t work when I retried it. Here is the link for the full project: https://codepen.io/milcb/pen/vYRZwOK?editors=1100

.project-tile{
display:flex;
flex-direction:row;
flex-wrap:wrap
align-items:left;
justify-content:left;
padding: 40px 40px;
}

.project-tile img{ width: 25%;
height: 150px;
object-fit: cover;
margin-top: 2px;
padding: 0 2px;
border-radius: 10px;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
max-width: 100%;}

You have flexbox on the individual “project-tile” divs, which is great for laying out elements in those divs, but it doesn’t do a thing for laying out the “project-tile” divs themselves. Remember, flexbox is applied to a parent element in order to layout children in the parent. So if you have four “project-tile” divs you want to layout then you need a parent for those four divs to apply flexbox to.

1 Like

Wow it’s always the little things you overlook. Thanks for the help!