I wanna remove a space on the left side of my nav so the links aligns with the heading-CodePudding

There's a space on the left side of my nav and I want to get rid of it so the links aligns with the heading.

How do I do that? I tried removing padding but I failed to remove the space.

.welcome {
  font-size: xx-large;
  color: #14078a;
}

nav {
  background-color: rgb(80%, 80%, 80%);
}

nav li {
  margin: 0px;
  list-style-type: none;
  padding: 5px 0px 5px 0px;
}

nav ul li {
  display: inline;
  padding: 5px 5px 5px 5px;
}

nav ul li a:link,
nav ul li a:visited {
  border-bottom: none;
  font-weight: bold;
  text-decoration: none;
}

nav ul li.home {
  padding-left: 0px;
}

<h1 >Welcome to my blog!</h1>
<nav>
  <ul>
    <li ><a href="index.html" title="Back to the home">home</a></li>
    <li><a href="about-me.html">about me</a></li>
    <li><a href="contact.html">contact</a></li>
  </ul>
</nav>

CodePudding user response：

Remove the default padding-inline-start: 40px; on the ul.

.welcome {
  font-size: xx-large;
  color: #14078a;
}

nav {
  background-color: rgb(80%, 80%, 80%);
}

nav li {
  margin: 0px;
  list-style-type: none;
  padding: 5px 0px 5px 0px;
}

nav ul li {
  display: inline;
  padding: 5px 5px 5px 5px;
}

nav ul li a:link,
nav ul li a:visited {
  border-bottom: none;
  font-weight: bold;
  text-decoration: none;
}

nav ul li.home {
  padding-left: 0px;
}

ul {
  padding-inline-start: 0px;
}

<body>
  <h1 >Welcome to my blog!</h1>
  <nav>
    <ul>
      <li ><a href="index.html" title="Back to the home">home</a></li>
      <li><a href="about-me.html">about me</a></li>
      <li><a href="contact.html">contact</a></li>
    </ul>
  </nav>
</body>

CodePudding user response：

you need to remove padding from ul

.welcome{ 
       font-size:xx-large;
       color:#14078a;
       }
       nav{
   background-color:rgb(80%,80%,80%);
   }
nav li{
      margin:0px;
     
      list-style-type:none;
   padding:5px 0px 5px 0px;
}
nav ul li{
           display:inline;
           padding:5px 5px 5px 5px;
          }
nav ul li a:link, nav ul li a:visited{
border-bottom:none;
font-weight:bold;
text-decoration:none;
}

nav ul{
padding:0px;
}

    <body>
    <div id="cnt">
    <h1 >Welcome to my blog!</h1>
    <nav>
    <ul>
    <li ><a href="index.html" title="Back to the home">home</a></li>
    <li><a href="about-me.html">about me</a></li>
    <li><a href="contact.html">contact</a></li>
    </ul>
    </nav>
      </div>
</body>
    </html>

CodePudding user response：

This can be avoided by doing the "initial reset" of padding and margin. You can just put

* {
   margin: 0;
   padding: 0;
}

at the start of your css file and it gives you much more control, because then the only spacing which will apply is the one defined by you.

I also like to add box-sizing: border-box; but that's just a personal preference