Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
#1

Tell us what’s happening:
i want to move my .hero class lower but whenever i do it it pulls the #welcome-section with it which is meant to be the background. how do i dissacossiate the two. i have used margin-top -50px but its not working

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">
    <link rel="stylesheet" href="styles.css">
    <title>Samuel's Portfolio Page</title>
    </head>
    <body>
      <section id="header">
        
      
        <nav id="navbar">
      <ul>
          <li><a href="#About">About</a></li>
          <li><a href="#Work">Work</a></li>
          <li><a href="#Contacts">Contacts</a></li>
        </ul>
        </nav>
        </section>     
        <section id="welcome-section">
          
    <h1 class="hero">Hey i am Samuel<h1>
      <p class="hero-subtitle">A Web Developer</p>      
        </section>
        
        
      </body>
  </html>

/* file: styles.css */
:root {
  --text-red:  #660000;

}
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: 'Baskervville', serif;
  margin: 0;
}

#header {
  width: 100%;
  background-color: #660000;
height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  position: fixed;
  top: 0;
  flex-wrap: wrap;
   
}

#header ul {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: right;
  padding-inline-start: 1;
  margin-block: 5;
  height: 100%;
}
#navbar {
  width: 50%;
  margin-top: -7px;
  flex-wrap: wrap;
  max-width: 300px;
  height: 50px;
  font-weight: bold;
  /*Raleway, Verdana, Tahoma;*/

}
nav > ul > li {
  color: #dfdfe2;
  margin: 0 0.2rem;
  padding: 0.2rem;
  display: block;
  font-family: "Verdana", serif;
}

nav > ul > li:hover {
  background-color: #dfdfe2;
  color: #1b1b32;
  cursor: pointer;
}

li > a {
  color: inherit;
  text-decoration: none;
}

.hero {
  text-align: center;
 margin-top: 130px;
 font-family: 'Poppins', sans-serif;
 font-size: 2.5rem;
 color: white;
 position: relative;
}

.hero-subtitle {
  margin-top: -35px;
  text-align: center;
  font-family: "Baskervville",  sans-serif;
  color: var(--text-red);
}
#welcome-section {
  width: 100%;
  height: 300px;
  background-color: #202020;
  margin-top: -90px
  
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:108.0) Gecko/20100101 Firefox/108.0

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

#2

You have a few options.

  1. Set the #welcome-section parent to display: flow-root to avoid margin collapse. Now the margin will work as expected.

  2. Or use padding instead of margin to push on the inside of the #welcome-section parent container.

  3. Or set the #welcome-section parent to be a flex or grid container and use the item placement options they provide. Which in my opinion, is the best option if you want to center the h1. You need to remove the margin-top if you center it like this.

#welcome-section {
  display: grid;
  place-content: center;
  height: 300px;
  background-color: #202020;  
}
#3

thanks i appreciate your help