My nav bar is covering up header

Question

I tried to create a simple nav bar under which a welcome text as header will be available. But the nav bar is covering up the header. I tried fixing the problem by fixing the margins. But by doing that header is also moving along with the nav bar. So what should I do so that the nav bar doesn't cover up the header and remain in fixed position.

body {
  margin: 0;
  padding: 0;
  background: #2E4053;
  color: white;
  font-family: 'Raleway', sans-serif;
}

.welcome {
  height: 100px;
  margin: px; /* ? */
}

.welcome h1 {
  text-align: center;
  font-family: 'Berkshire Swash', cursive;
  color: white;
  padding: 26px;
  margin: 0 25%;
  border-bottom: 2px solid white;
}

.nav {
  height: 60px;
  width: 100%;
  background-color: lawngreen;
  position: fixed;
}

.search {
  float: right;
  margin-top: -52px;
  margin-right: 35px;
}

input {
  height: 20px;
  border-radius: 7px;
}

.nav ul {
  list-style: none;
  text-decoration: none;
}

.nav ul li a {
  text-decoration: none;
}

.nav ul li {
  display: inline-block;
  padding: 0px 20px;
  font-size: 25px;
  color: black;
  margin: 3px 50px;
  font-family: 'Boogaloo', cursive;
}

.nav ul li a:hover {
  text-decoration: line-through;
  color: blue;
  transition: 0.5s;
}

.search a i:hover {
  color: white;
  font-size: 33px;
}

<link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">

<div class="nav">
  <ul>
    <li><a href="#me">About Me</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#gallery">Gallery</a></li>
    <li><a href="#find">Find Us</a></li>
  </ul>
  <div class="search">
    <input type="text" placeholder="Search">
    <a href="https://google.com"><i class="fa fa-search" style="font-
    size:30px;"></i></a>
  </div>
</div>

<div class="welcome">
  <h1>Welcome to My Travel Blog</h1>
</div>

Answer 1

What's happening?

When declaring position: fixed on any element you are also taking it out of the natural document flow.

So imagine a bowl of cereal, when you take a spoon full of fruit loops, the space those fruit loops occupied before is now filled up by the fruit loops around it, as though they were never there to begin with, but they are, they are just above.

How to resolve it

You need to account for the space they no longer occupy in the DOM (document object model).

This is usually done by offsetting the height of the fixed element with margin or padding properties - which ever one is more appropriate.
In your case either will work. The only reason why margin hadn't appeared to result in the expected behaviour before was due to the absence of any top property declared on your fixed element (.nav), e.g:

.nav {
  height: 60px;
  width: 100%;
  background-color: lawngreen;
  position: fixed;
  top: 0; /* for good measure */
}

Then you can declare the appropriate margin property on the applicable element (in this case .welcome), e.g:

.welcome {
  height: 100px;
  margin-top: 60px;
}

Code Snippet Demonstration:

body {
  margin: 0;
  padding: 0;
  background: #2E4053;
  color: white;
  font-family: 'Raleway', sans-serif;
}

.welcome {
  height: 100px;
  margin-top: 60px;
}

.welcome h1 {
  text-align: center;
  font-family: 'Berkshire Swash', cursive;
  color: white;
  padding: 26px;
  margin: 0px 25%;
  border-bottom: 2px solid white;
}

.nav {
  height: 60px;
  width: 100%;
  background-color: lawngreen;
  position: fixed;
  top: 0; /* for good measure */
}

.search {
  float: right;
  margin-top: -52px;
  margin-right: 35px;
}

input {
  height: 20px;
  border-radius: 7px;
}

.nav ul {
  list-style: none;
  text-decoration: none;
}

.nav ul li a {
  text-decoration: none;
}

.nav ul li {
  display: inline-block;
  padding: 0px 20px;
  font-size: 25px;
  color: black;
  margin: 3px 50px;
  font-family: 'Boogaloo', cursive;
}

.nav ul li a:hover {
  text-decoration: line-through;
  color: blue;
  transition: 0.5s;
}

.search a i:hover {
  color: white;
  font-size: 33px;
}

<head>
  <meta charset="UTF-8">
  <title>My Travel Blog</title>
  <link rel="stylesheet" href="home.css">
  <link href="https://fonts.googleapis.com/css?
    family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
    awesome.min.css" rel="stylesheet">
</head>

<body>
  <div class="nav">
    <ul>
      <li><a href="#me">About Me</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#find">Find Us</a></li>
    </ul>
    <div class="search">
      <input type="text" placeholder="Search">

      <a href="https://google.com"><i class="fa fa-search" style="font-
        size:30px;"></i></a>
    </div>
  </div>
  <div class="welcome">
    <h1>Welcome to My Travel Blog</h1>
  </div>
</body>

Answer 2

body {
  margin: 0;
  padding: 0;
  background: #2E4053;
  color: white;
  font-family: 'Raleway', sans-serif;
}

.nav {
  height: 60px;
  width: 100%;
  background-color: lawngreen;
  position: fixed;
}

.search {
  float: right;
  margin-top: -52px;
  margin-right: 35px;
}

input {
  height: 20px;
  border-radius: 7px;
}

.nav ul {
  list-style: none;
  text-decoration: none;
}

.nav ul li a {
  text-decoration: none;
}

.nav ul li {
  display: inline-block;
  padding: 0px 20px;
  font-size: 25px;
  color: black;
  margin: 3px 50px;
  font-family: 'Boogaloo', cursive;
}

.nav ul li a:hover {
  text-decoration: line-through;
  color: blue;
  transition: 0.5s;
}

.search a i:hover {
  color: white;
  font-size: 33px;
}

.welcome {
  height: 100px;
  position:relative;
  top: 7%;
}

.welcome h1 {
  text-align: center;
  font-family: 'Berkshire Swash', cursive;
  color: white;
  padding: 26px;
  margin: 0px 25%;
  border-bottom: 2px solid white;
}

<div class="nav">
    <ul>
        <li><a href="#me">About Me</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#find">Find Us</a></li>
    </ul>
    <div class="search">
        <input type="text" placeholder="Search">

        <a href="https://google.com"><i class="fa fa-search" style="font-
    size:30px;"></i></a>
    </div>
    </div>
    <div class="welcome">
      <h1>Welcome to My Travel Blog</h1>
    </div>

Adding position:relative; top: 7%; to .welcome div.

Answer 3

You forgot to add margin in welcome class. Additionally, top:0 to fixed positioned .nav is also missing.

Here is the working solution

body {
margin: 0;
padding: 0;
background: #2E4053;
color: white;
font-family: 'Raleway', sans-serif;
}

.welcome {
height: 100px;
margin: 70px 0 0 0;
}

.welcome h1 {
text-align: center;
font-family: 'Berkshire Swash', cursive;
color: white;
padding: 26px;
margin: 0px 25%;
border-bottom: 2px solid white;
}

.nav {
height: 60px;
width: 100%;
background-color: lawngreen;
position: fixed;
top: 0;
}

.search {
float: right;
margin-top: -52px;
margin-right: 35px;
}

input {
height: 20px;
border-radius: 7px;
}

.nav ul {
list-style: none;
text-decoration: none;
}

.nav ul li a {
text-decoration: none;
}

.nav ul li {
display: inline-block;
padding: 0px 20px;
font-size: 25px;
color: black;
margin: 3px 50px;
font-family: 'Boogaloo', cursive;
}

.nav ul li a:hover {
text-decoration: line-through;
color: blue;
transition: 0.5s;
}

.search a i:hover {
color: white;
font-size: 33px;
}

<head>
  <meta charset="UTF-8">
  <title>My Travel Blog</title>
  <link rel="stylesheet" href="home.css">
  <link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
</head>

<body>
  <div class="nav">
    <ul>
      <li><a href="#me">About Me</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#find">Find Us</a></li>
    </ul>
    <div class="search">
      <input type="text" placeholder="Search">

      <a href="https://google.com"><i class="fa fa-search" style="font-
    size:30px;"></i></a>
    </div>
  </div>
  <div class="welcome">
    <h1>Welcome to My Travel Blog</h1>
  </div>
</body>