Ul doesn't fit nav-CodePudding

Good night everybody, I am having troubles with fitting my ul on the nav, because it just goes outside of it as you can see in the image. I want it to be just beside the "logo" text 'Diefonro'. Does anyone know how to fix it?

[Image][1]: https://i.stack.imgur.com/hsZUw.png

This is the HTML and CSS code:

<html lang="en">
 
  <body>
    <header>
      <nav>
        
          <p class="gradient-text">Diefonro</p>
        
        
          <ul class="nav-list">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Portfolio</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
          </ul>
        
      </nav>
    </header>
  </body>
</html>

*{
  margin: 0;
}
nav{
  display: block;
  background-color: #fff;
  box-shadow: 1px 1px 5px rgba(51, 51, 51, 0.266);
  height: 3.2em;
  width: 100%;
}
ul.nav-list{
  list-style: none;
  width: 100%;
  margin-left: 35%;
}

ul.nav-list li{
  display: block;
  float: left;
  padding: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
}

nav a{
  padding-bottom: 1%;
  text-decoration: none;
  color: #333;
}


  [1]:

CodePudding user response：

.gradient-text {
 float: left;
}

CodePudding user response：

1) You shouldn't give the nav a particular height, if you want responsive design

/* height: 3.2em; */     // Remove the height

2) You can use flexbox here

nav {
  ...
  display: flex;
  align-items: center;
  ...
}

* {
  margin: 0;
}

nav {
  /* display: block; */
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 1px 1px 5px rgba(51, 51, 51, 0.266);
  /* height: 3.2em; */
  width: 100%;
}

ul.nav-list {
  list-style: none;
  width: 100%;
  /* margin-left: 35%; */
}

ul.nav-list li {
  display: block;
  float: left;
  padding: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
}

nav a {
  padding-bottom: 1%;
  text-decoration: none;
  color: #333;
}

<header>
  <nav>

    <p class="gradient-text">Diefonro</p>


    <ul class="nav-list">
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Services</a>
      </li>
      <li>
        <a href="#">Portfolio</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>

  </nav>
</header>