There is a whitespace and align-items

Question

I am having trouble. There is a whitespace between the two pages of content. Also I have tried applying margin: auto; and text-align: center; but to no avail I don't know what to do. Also what other things are wrong with the way I implemented my design? Also I tried to add a gray border around the avatar so that it fits into the navbar but stays exactly where it is.

<!DOCTYPE html>
    <html lang="en">
      <head>
        <link rel="stylesheet" href="styles.css">
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, intial-scale=1.0"/>
        <title>Johnson's Personal Portfolio</title>
      </head>
      <body>
        <nav id="navbar">
          <div class="avatar">
            <img alt="LordYamanouchi" src="https://avatars.githubusercontent.com/u/20011297?v=3"/>
          </div>
          <ul>
            <li><a href="#">Alias</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contacts<a/></li>
            <li><a href="#">Works</a></li>
          </ul>
        </nav>
        <header id="welcomesection">
          <div id="welcome-section">
          <h1>
            Welcome to Johnson Oluwaseun Adeleke's 
          </h1>
          <h1>
              <>Portfolio Page<> 
          </h1>
          
          <p style="color: blue"><i>I am an aspiring Web Developer</i></p>
          </div>
        </header>
        <section id="projects">
          <h2>Here are some of my Projects</h2>
          <p></p>
        </section>
      </body>
    </html>

body{
  width: 100%;
  height: 100%;
  margin: 0;
}
#navbar li, a{
  list-style-type: none;
  display: inline-block;
  padding: 4px;
  float: right;
  color: black;      font-weight: normal;
  font-style: Helvetica, sans-serif;
  font-size: 15px;
  vertical-align: center;
}
nav{
  width: 100%;
  display:block;
  background-color:red;
  position: fixed;
  height: 50px;
  top: 0;
  left: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

#welcomesection{
  float: clear;
  display: flex;
  align-items: center;
  width: 100%; 
  height: 120vh;
  text-align: center;
  background-color: teal;
  z-index: 1;
}
h1{
  margin: auto;
}
#welcomesection p{
  text-align: center;
}
.avatar img{
  width: auto;
  height: 50px;
  float: left;
  left: 15px;
  top: 0;
  padding: 15px solid grey;
}
#projects{
  width: 100%; 
  height: 150vh;
  background-color:blue;
}
#projects h2{
  text-decoration: underline;
  text-align: center;
}

Your `
Here are some of my Projects
` probably has a margin. Probably set `h2{ margin-top: 0; }` to remove the whitespace — T-S, Sep 25 '22 at 19:53

score 1 · Answer 1 · answered Sep 25 '22 at 19:57

Is the h2 margin you can remove it and add a padding

body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#navbar li,
a {
  list-style-type: none;
  display: inline-block;
  padding: 4px;
  float: right;
  color: black;
  font-weight: normal;
  font-style: Helvetica, sans-serif;
  font-size: 15px;
  vertical-align: center;
}

nav {
  width: 100%;
  display: block;
  background-color: red;
  position: fixed;
  height: 50px;
  top: 0;
  left: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

#welcomesection {
  float: clear;
  display: flex;
  align-items: center;
  width: 100%;
  height: 120vh;
  text-align: center;
  background-color: teal;
  z-index: 1;
}

h1 {
  margin: auto;
}

#welcomesection p {
  text-align: center;
}

.avatar img {
  width: auto;
  height: 50px;
  float: left;
  left: 15px;
  top: 0;
  padding: 15px solid grey;
}

#projects {
  width: 100%;
  height: 150vh;
  background-color: blue;
}

#projects h2 {
  text-decoration: underline;
  text-align: center;
  margin-top: 0;
  padding-top: 20px;
}

<nav id="navbar">
  <div class="avatar">
    <img alt="LordYamanouchi" src="https://avatars.githubusercontent.com/u/20011297?v=3" />
  </div>
  <ul>
    <li><a href="#">Alias</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contacts<a/></li>
          <li><a href="#">Works</a></li>
  </ul>
</nav>
<header id="welcomesection">
  <div id="welcome-section">
    <h1>
      Welcome to Johnson Oluwaseun Adeleke's
    </h1>
    <h1>
      <>Portfolio Page
        <>
    </h1>

    <p style="color: blue"><i>I am an aspiring Web Developer</i></p>
  </div>
</header>
<section id="projects">
  <h2>Here are some of my Projects</h2>
  <p></p>
</section>

There is a whitespace and align-items

Here are some of my Projects

1 Answers1