Как сделать так, чтобы форма пути клипа моего сайта не влияла на остальную часть сайта?

Question

Я начал делать сайт и хотел создать уникальную форму, чтобы go находился позади моего lo go и панели навигации. Чтобы сделать это, я использовал код пути клипа в своем CSS, который является новым для меня, и я впервые пробовал это. Однако я не могу заставить его работать, поскольку между панелью навигации и текстом на странице либо есть большой разрыв, если я использую относительное расположение, либо все будет втиснуто вверху и наслоено друг на друга, если Я использую абсолютное позиционирование.
Я не могу понять, как получить желаемый эффект. Я оставил его с относительным позиционированием на данный момент, так как это самое близкое, что я мог получить. Любая помощь будет высоко ценится.

body {
  z-index: 1;
  display: block;
  min-width: 44em;
  max-width: 60em;
  margin: 0 auto;
  font-family: 'Times New Roman', Times, serif Arial, Helvetica, sans-serif;
  background-color: rgb(76, 119, 175);
}


/*my logos code */

#logo {
  z-index: 1;
  position: relative;
  margin-top: 20px;
  margin-left: 10px;
}


/*the purple shapes code */

#purpleL {
  z-index: 0;
  position: relative;
  width: 961px;
  height: 80px;
  background-size: cover;
  background-color: rgba(64, 19, 85, 0.952);
  clip-path: polygon(100% 0, 100% 27%, 41% 28%, 0 47%, 0 0);
}

h2 {
  text-align: center;
}

.navbar {
  z-index: 1;
  color: rgb(119, 206, 201);
  text-align: left;
  padding: 0.25em;
  padding-left: 1em;
  float: left;
  width: 7em;
  top: 0px;
}

.navbar ul {
  margin: 0;
  padding: 0;
  position: relative;
  top: 2em;
}

.navbar li {
  list-style-type: none;
  padding: 0.25em;
  margin: 0.25em 0;
  position: relative;
  background-color: darkcyan;
}

#name {
  text-align: center;
}

.nav a {
  text-decoration: none;
}

nav a:link {
  color: black;
}

nav a:visited {
  color: purple;
}

nav a:hover {
  color: white;
}

nav a:active {
  color: blue;
}


/*my solid grey background to go behind everything */

#solid {
  z-index: -1;
  background-color: grey;
}

<div id="solid">
  <!--my logo-->
  <img src="images/cm designs.png" width="940" height="180" alt="cm designs" id="logo" />
  <div id="purpleL">
    <!--the div I used to mark where my purple shape is to go.-->
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="index.html"> Home</a></li>
      <li><a href="calander.html"> acnh calander </a></li>
      <li><a href="about.html"> about me </a></li>
      <li><a href="art.html"> art portfolio </a></li>
      <li><a href="contact.html"> contact </a></li>
    </ul>
  </nav>
  <h2> Home </h2>
  <p> Hello! My name is Christie Mattern and I am the creator of this website. I jsut wanted to start by saying thank you for checking out my website! I coded everything myself as well as created all the art for it. On here I have included an about me page
    for anyone looking to hire me, a contact page incase someone needs to get ahold of me. This could be becuase there is an issue with the website, about a job offer or because something changed with animal crossing and the calander needs adjusted.
  </p>
  <p>I also included a page for my art portfolio, I am a freelance artist and my art can be found there. I also designed a calander for the bigs and fish in the new Animal Crossing New Horizons game. I didn't like a lot of the apps and the wikis were not
    great. I am wanting to turn this into a full app and am in the process of doing so. For the time being though it is available here and may or may not stay here after the app is done.
  </p>
  <p> Again, thank you for checking out my website and I hope you like what you see!</p>
  <p id="footer">Christie Mattern &homtht; Fort Wayne, Indiana &homtht; isfsf</p>
</div>