Nav bar of portfolio project

Projects
1

https://www.codecademy.com/courses/make-a-website/projects/building-a-personal-portfolio

Hi, I have a problem with the code provided by code academy and I don’t know how to solve it: the navigation bar items overlap the H1 title when you resize the window.
And also, if there are two words in the item of the nav bar they get underneath each other which isn’t esthetical.

15

here is the html:

<html lang="en">
  <head>
    <title>My Personal Portfolio</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
    <link href="style.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <header class="container">
      <div class="row">
        <h1 class="col-sm-5">Elisabeth Tasia
        </h1>
        <nav class="col-sm-7 text-right">
          <a href="index.html">Home </a>
          <a href="about.html">About Me </a>
          <a href="education.html">Education </a>
          <a href="experience.html">Experience </a>
          <a href="contact.html">Contact Me </a>
        </nav>
      </div>
    </header>

    <section class="jumbotron">
      <div class="container">
        <div class="row">
          <h2> Programmer</h2>
        </div>
      	<div class="row">
          <h3>CSS, HTML, Javascript, JQuery</h3>
        </div>
       </div>
    </section>

    <footer class="container">
      <div class="row">
        <p class="col-sm-4">&copy; 2019 Elisabeth Tasia</p>
        <div class="col-sm-2">
          <a href="https://www.linkedin.com/" target="_blank">LinkedIn</a>
        </div>
        <div class="col-sm-2">
          <a href="https://medium.com/" target="_blank">Medium</a>
        </div>
        <div class="col-sm-2">
          <a href="https://github.com/" target="_blank">Github</a>
        </div>
        <div class="col-sm-2">
          <a href="https://tunein.com/podcasts/" target="_blank">Podcast</a>
        </div>
      </div>
    </footer>

<div class="row justify-content-center">
      <a href="index.html" class="btn btn-primary btn-lg">Home</a>
  </div>

  </body>
</html>```

here is the css:

```body {
  font-family: Roboto, sans-serif;
  background-image: url('https://s3.amazonaws.com/codecademy-content/courses/learn-css-selectors-visual-rules/hypnotize_bg.png');
}

header {
  padding: 20px 0;

}

header .row,
footer .row {
  display: flex;
  align-items: center;
}

h1 {
  font-weight: 700;
  margin: 0;
}

nav {
  display: flex;
  justify-content: flex-end;
}

a {
  padding: 0 20px;
  margin: 0;
}

.jumbotron {
  display: flex;
  align-items: center;
  background-image: url('images/mountain_jumbotron.jpg');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  height: 400px;
}

.jumbotron h2 {
  font-size: 60px;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.jumbotron h3 {
  margin: 0 0 20px;
  color: #fff;
}

section .row img {
  margin: 0 0 30px;
  width: 100%;
}

.col-md-6 {
  margin: 0 0 30px;
}

.btn.btn-primary {
  border-radius: 2px;
  border: 0px;
  color: #fbd1d5;
  background-color: #ffffff;
}

.btn.btn-primary:hover {
  color: #ffffff;
  background-color: #fbd1d5;
}

.btn-secondary {
  background-color: #2a70e0;
  color: #ffffff;
  margin: 0 0 30px;
}

.portrait {
  width:  350px;
  height: 300px;
}

figure img {
  width: 100%;
  height: auto;
}

figure {
  margin-bottom: 30px;
}

footer {
  font-size: 12px;
  padding: 20px 0;
}

footer .col-sm-8 {
  display: flex;
  justify-content: flex-end;
}

footer ul {
  list-style: none;
}

img{
  max-height: 100%;
  object-fit: scale-down;
}

I tried flex-wrap: wrap on the header and on the nav but it doesn’t work.
I tried @media query and it didn’t work either.