Overlapping content with navigation bar / header

Issue

Hello I am learning react and I have made 2 components: Navbar and Description

export const Introduction = () => {
return (
    <div className="Introduction">
        <h1> Hi my name is Randolf </h1>
        <h1> Nice to meet you!</h1>
    </div>
);};

export const Navbar = () => {
return (
    <div className="Navbar">
        <h1 className="NavTitle"> Data + Engineering </h1>
        <nav>
            <ul>
                <li><a href="App.js"> About</a></li>
                <li><a href="Projects.js"> Projects</a></li>
                <li><a href="Blogs.js"> Blogs</a></li>
                <li><a href="Contact.js"> Contact</a></li>
            </ul>
        </nav>
    </div>
);

};

I am trying to have the navigation bar and the navigation title in the place that they are currently, but the content from Introduction overlaps with them in place when they are within my function app that returns the html script.

function App() { return (
<div className='container'>
  <header>
    <Navbar/>
  </header>
  <Introduction/>
</div>);}

From here this is also my css:

.App {
  background-image: linear-gradient(to right, rgb(229, 231, 235), rgb(156, 163, 175), rgb(75, 85, 99));
  size: 100%;
}

.App-header {
  background-image: linear-gradient(to right, rgb(229, 231, 235), rgb(156, 163, 175), rgb(75, 85, 99));
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}

.App-link {
  color: #61dafb;
}

body {
  background-image: linear-gradient(to right, rgb(229, 231, 235), rgb(156, 163, 175), rgb(75, 85, 99));
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Navigation bar components */

.NavTitle {
  color: #212427;
  float: left;
  padding-top: 10px 0;
  padding-left: 20px;
  font-weight: 500;
  font-size: 37.5px;
  font-weight: 200;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  margin-right: 70px;
  padding-top: 30px;
}

nav a {
  box-shadow: inset 0 0 0 0 #212427;
  color: #212427;
  padding: 0 .75rem;
  margin: 0 -.75rem;
  font-size: 25px;
  font-weight: 500;
  font: bold;
  text-decoration: none;
  transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
  border-radius: 7.5px;
}

a:hover {
  color: #212427;
  box-shadow: inset 200px 0 0 0 beige;
  border-radius: 7.5px;
}

And This is the output I received:

I would like to know how to have the "Hi my name is Randolf Nice to meet you! under the navigation bar and "Data + Engineering" as they are in the correct orientation. Thank you for following with me!

Solution

the problem you are facing is due to floats, in 2023 you should avoid using floats to create layouts and use flexbox or grid instead

but this was a very common problem when we used to design with floats and solution is called clearfix, I will suggest you read about why float cause this issue and what is clearfix solution

but in short you can use this

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

and add the class called clearfix to header component in HTML

.App {
  background-image: linear-gradient(to right, rgb(229, 231, 235), rgb(156, 163, 175), rgb(75, 85, 99));
  size: 100%;
}

.App-header {
  background-image: linear-gradient(to right, rgb(229, 231, 235), rgb(156, 163, 175), rgb(75, 85, 99));
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}

.App-link {
  color: #61dafb;
}

body {
  background-image: linear-gradient(to right, rgb(229, 231, 235), rgb(156, 163, 175), rgb(75, 85, 99));
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Navigation bar components */

.NavTitle {
  color: #212427;
  float: left;
  padding-top: 10px 0;
  padding-left: 20px;
  font-weight: 500;
  font-size: 37.5px;
  font-weight: 200;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  margin-right: 70px;
  padding-top: 30px;
}

nav a {
  box-shadow: inset 0 0 0 0 #212427;
  color: #212427;
  padding: 0 .75rem;
  margin: 0 -.75rem;
  font-size: 25px;
  font-weight: 500;
  font: bold;
  text-decoration: none;
  transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
  border-radius: 7.5px;
}

a:hover {
  color: #212427;
  box-shadow: inset 200px 0 0 0 beige;
  border-radius: 7.5px;
}

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

<div class="container">
  <header class=clearfix>
    <div class="Navbar">
      <h1 class="NavTitle"> Data + Engineering </h1>
      <nav>
        <ul>
          <li><a href="App.js"> About</a></li>
          <li><a href="Projects.js"> Projects</a></li>
          <li><a href="Blogs.js"> Blogs</a></li>
          <li><a href="Contact.js"> Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <div class="Introduction">
    <h1> Hi my name is Randolf </h1>
    <h1> Nice to meet you!</h1>
  </div>
</div>

Answered By - ashish singh