Tell us what’s happening:
My welcome section is not centered on the page. I think the height of the navbar is pushing it out of center. I’m not sure how to fix it.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<ul>
<li><a href="#welcome-section">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="welcome-section">
<h1>Hi, I'm ...</h1>
<p>A software developer</p>
</section>
<section id="projects">
</section>
<section id="contact">
<div class="social-icons">
<a href="#">
<i class="icon fa-brands fa-github"></i>
</a>
<a href="https://www.linkedin.com/school/free-code-camp/">
<i class="icon fab fa-linkedin-in" style="color: red"></i>
</a>
</div>
</section>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
/* scroll-behavior: smooth; */
font-size: 14px;
min-height: 100vh;
height: 100%;
}
body {
/* min-height: calc(100vh - 50px); */
height: 100%;
/* background-color: rgb(32, 32, 71); */
/* background-color: rgb(132, 167, 219); */
}
#navbar {
box-shadow: 3px 3px 3px 3px rgb(0,0,0, 0.1);
background-color: white;
}
#navbar ul {
width: 100%;
list-style: none;
display: flex;
justify-content: flex-end;
align-items: center;
}
#navbar li {
height: 50px;
}
#navbar a {
margin-right: 1em;
height: 100%;
display: flex;
align-items: center;
text-decoration: none;
color: rgb(32, 32, 71);
}
#navbar a:hover {
cursor: pointer;
background-color: rgb(214, 211, 211, 0.7);
}
header {
position: sticky;
top: 0;
}
#welcome-section h1 {
margin: 0;
padding: 0;
color: #FFF;
font-weight: bold;
font-size: clamp(25px, 3.5vw, 40px);
text-align: center;
text-shadow: 1px 1px 2px rgb(100, 99, 99);
}
#welcome-section p {
color: #FFF;
font-style: italic;
text-align: center;
text-shadow: 1px 1px 2px rgb(100, 99, 99);
}
#welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: rgb(132, 167, 219);
}
/* .container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
} */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15
Challenge Information:
Personal Portfolio Webpage - Build a Personal Portfolio Webpage
