I’m facing an issue with the alignment of my header using CSS. Despite my attempts, the header doesn’t appear to be centered on the page as expected. It seems like there might be some discrepancies in my styling.
Additionally, I’ve noticed that the top of the text within the main content section hasn’t moved to the desired position right under the header. I’ve reviewed my CSS properties and positioning attributes, but it’s not yielding the desired outcome.
It’s possible that there might be conflicting styles or positioning rules affecting the alignment of both the header and the text. I would greatly appreciate guidance on how to resolve this issue and ensure that both the header is centered and the text begins right beneath it at the top of the page. No matter what I have done, nothing has worked. I need help fixing my code for text alignment and position.
.navbar {
position: absolute;
top: 0;
left: 38%;
translate: -50;
height: 80px;
display: flex;
align-items: center;
font-size: 120%;
}
.nav-link-home {
text-decoration: none;
}
.nav-link {
color: white;
text-decoration: none;
}
.navbar * {
display: inline;
font-size: 100%;
}
@font-face {
font-family: Oswald;
src: url("../fonts/Oswald-Medium.ttf");
}
* {
font-family: Oswald, serif;
}
html {
scroll-behavior: smooth;
}
.nav-item {
color: white;
text-decoration: none;
}
.nav-link-home {
color: white;
}
#mainPage {
background-image: url(https://www.pixelstalk.net/wp-content/uploads/images1/Shadows-Backgrounds-HD.jpg);
min-height: 100vh;
width: 100%;
background-size: cover;
background-position: center;
color: aliceblue;
}
.main-display {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 10px;
min-height: 120vh;
text-align: center;
font-family: sans-serif;
animation: fadeInOut;
animation-iteration-count: 2;
animation-duration: 3s;
}
@keyframes fadeInOut {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#about-me {
background-color: lightblue;
min-height: 100vh;
width: 100%;
background-size: cover;
background-position: center;
display: grid;
place-items: center;
text-align: center
}
#border-line-about {
position: relative;
top: 100%;
left: 22%;
margin-top: 90vh;
}
#content-text {
justify-content: center;
text-align: center;
position: relative;
top: -888%;
left: -42%;
position: fixed;
position: absolute;
top: -70vh;
}
.about-me-pics {
margin-top: 70px;
display: flex;
flex-direction: row;
justify-content: center;
transform: translate(-5%, -120%);
}
#las-vegas-pic {
margin-left: 100px;
margin-right: 330px;
}
#basketball-pic {
transform: translate(-60%, 0%);
text-align: center;
}
#mountain-pic {
transform: translate(-40%, -0%);
}
#about-page-text {
position: absolute;
top: 110px;
}<html lang="en">
<head>
<meta charset="UTF-8">
<title>Personal Project</title>
<!-- bootstrap and aos -->
<!--<link rel="stylesheet" href="assets/css/bootstrap.min.css">-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/aos.css">
<!-- css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</ul>
</div>
</div>
</nav>
<section id="mainPage">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="main-display">
<h1 id="name-title">Mazin Esmail</h1>
<h2>Software Developer</h2>
<h2>Student</h2>
</div>
</div>
</div>
</div>
</section>
<section id="about-me">
<div class="container">
<div class="row">
<div class="heading-about">
<h1 id="about--me" class="display-5">About me</h1>
<p id="border-line-about"></p>
</div>
</div>
</div>
<div class="about-page-text">
<p>Hello!, I am a student at Cal State San Bernardino and I am studying the field of computer science. I love going out to view new things and play the sports that I love. As an aspiring software engineer I want to solve real life problems and create
web applications to further thrive a positive impact to the world. </p>
</div>
<div class="about-me-pics">
<figure id="las-vegas-pic">
<img src="assets/img/IMG_0525.jpeg" height="400" width="400" />
<figcaption>Las Vegas, Nevada</figcaption>
</figure>
<figure id="basketball-pic">
<img src="assets/img/IMG_0816.jpeg" height="400" width="400" />
<figcaption>Fontana, California</figcaption>
</figure>
<figure id="mountain-pic">
<img src="assets/img/IMG_2825.jpeg" height="400" width="400" />
<figcaption>Fontana, California</figcaption>
</figure>
</div>
</section>
<!-- bootstrap and aos js -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/8c2adfc9c1.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
2
Answers
Navbar: The navbar is now centered using justify-content: center and align-items: center.
Main Display: The header text is centered both vertically and horizontally using top: 50% and transform: translateY(-50%).
About Me Section: The text-align: center property is applied to the #about-me section to center-align its content.
About Me Pics: The pictures in the about me section are now wrapped in a flex container with flex-wrap: wrap to ensure proper alignment. I’ve also adjusted the gap between the pictures.
you’re trying to horizontally center your navbar using left: 38%; translate: -50;, but the correct property is transform, not translate. Also, setting left: 38% is not a reliable way to center your navbar.
you can use position: relative without the need for negative percentage values. Also, you can adjust the alignment using the transform property if needed.
The transform: translate(-50%, -50%) will center your .main-display element both vertically and horizontally.