Tell us what’s happening:
Describe your issue in detail here.
I was wondering why my center Div in my project section changed shape compared to the two outer divs I want all three of them to be same is there a better way to get the three divs to be the same?
**Your code so far**
/* file: index.html */
<DOCTYPE! html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lobster&display=swap');
</style>
<title>Nacho Portfolio</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/31d3042267.js" crossorigin="anonymous"></script>
</head>
<nav id='navbar'>
<a class='links' href='#'>About</a>
<a class='links' href='#'>Contact</a>
<a class='links' href='#'>Portfolio</a>
</nav>
<body>
<section id='welcome-section'>
<h1 class='title'>Hi they call me Nacho</h1>
<p class='intro'> Developer in Progress</p>
</section>
<section id='projects'>
<h2>Here are some of my projects</h2>
<div class='projects'>
<a href='https://codepen.io/ignacio530/pen/wvmeaqx' target='_blank' class='project-tile'>
<img src='https://hosting.photobucket.com/images/i/Ignacio1530/Screenshot_(20).png'> Product Landing Page
</a>
<a href='https://codepen.io/ignacio530/pen/abEXNag' class='project-tile2'>
<img src='https://hosting.photobucket.com/images/i/Ignacio1530/Screenshot_(19)_-_Copy.png'>
Survey Page
</a>
<a href='https://codepen.io/ignacio530/pen/abEXNag' class='project-tile-3'>
<img src='https://hosting.photobucket.com/images/i/Ignacio1530/Screenshot_(21)_-_Copy.png'> Tribute Page
</a>
</div>
</section>
<section class='info'>
<div class='contact-infi'>Contact - Info </div>
</p>
<div>
<a class='contact-links' href='#'>
<i id='icons' class="fa-brands fa-square-facebook"> Facebook</i></a>
<a class='contact-links' href='#'>
<i id='icons' class="fa-brands fa-square-instagram"> Instagram</i></a>
<a class='contact-links' href='#'>
<i id='icons' class="fa-brands fa-square-github"> Github</i>
</a>
<a class='contact-links' id='icons' href='#'><i id='icons' class="fa-solid fa-square-phone"></i> Contact</a>
</div>
<footer>
</footer>
</section>
</body>
</html>
/* file: styles.css */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
body {
background-color: red;
text-align: center;
}
#navbar {
position: fixed;
width: 100%;
height: 80px;
display: flex;
align-items: center;
background-color: green;
justify-content: flex-end;
}
.links {
color: black;
margin: 20px;
font-size: 26px;
font-family: 'Bebas Neue';
font-weight: bold;
}
.title {
font-family: Lobster;
font-size: 72px;
}
.intro {
font-family: 'Bebas Neue';
font-size: 32px;
}
#welcome-section {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#projects {
background-color: green;
}
.projects {
display: flex;
width: 100%;
height: 350px;
background-color: green;
justify-content: center;
align-items: center;
}
.project-tile {
width: 250px;
height: 250px;
background-color: black;
margin: 0 20px;
}
.project-tile-2 {
width: 250px;
height: 250px;
background-color: black;
margin: 0 20px;
}
.project-tile-3 {
width: 250px;
height: 250px;
background-color: black;
margin: 20px;
}
h2 {
font-family: 'Bebas Neue';
font-size: 42px;
padding-top: 30px;
}
img {
height: 200px;
width: 250px;
}
.info {
display: flex;
width: 100%;
height: 80vh;
flex-direction: column;
align-items: center;
justify-content: center;
}
.contact-infi {
font-size: 42px;
font-family: 'Bebas Neue';
padding-bottom: 20px;
}
.begging {
font-size: 24px;
}
.contact-links {
margin: 30px;
}
footer {
padding-top: 100px;
}
#icons {
font-size: 32px;
color: black;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Challenge: Responsive Web Design Projects - Build a Personal Portfolio Webpage
Link to the challenge: