Why is my nth-of-type pseudo class not selecting the first a, and see it as the 4 one?

My question is: Why is .main-index a:nth-child(4) working on my first a link, and not .main-index a:nth-child(1)?

I can't seem to find the problem or what i'm doing wrong.

It works but I know it isn't the right way to select the first one. Does anyone know how to select the first a in .main-index the right way

.main-index h2 {
    height: 60px;
    text-align: center;
    line-height: 60px;
    background-color: #3b3b3b;
    color: white;
    font-size: 25px;
    letter-spacing: 1px;
    margin: 0;
    font-family: "LemonMilk";
}


/********************************************
3.0 feedback
*********************************************/

.main-index p:nth-of-type(1) {
    margin: 15px 0 0 10px;
    text-transform: uppercase;
    font-size: 14px;
    float: left;
    font-family: "NeueHaasGrotesk Light";
}

.main-index p:nth-of-type(2) {
    clear: both;
    margin-top: 10px;
    display: inline-block;
}

.main-index img {
    margin: 10px 0 0 5px;
    height: 25px;
    float: left;
}

.main-index a:nth-child(4) {
    float: right;
    margin: 7px 10px 0 0;
    padding: 10px;
    background-color: #0e8f9c;
    color: white;
    border: none;
    font-size: 13px;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-family: "NeueHaasGrotesk medium";
}


/********************************************
5.0 Ticket Info International Student
*********************************************/

.main-index p:nth-of-type(2) {
    margin: 10px;
    font-size: 18px;
}

.main-index a:nth-child(6) {
    background-color: #d3464e;
    padding: 10px;
    margin: 15px;
    display: block;
    text-align: center;
}


/********************************************
6.0 main content
*********************************************/

.background-home {
    background-image: url(../img/goingoutparadiso.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 80%;
    padding: 20px 0;
}

.background-home li {
    text-align: center;
    line-height: 90px;
    font-size: 50px;
    border-bottom: 5px solid white;
    border-top: 5px solid white;
    box-shadow: 1px 1px 2px #3b3b3b;
    text-transform: uppercase;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
}

.background-home a {
    display: block;
}

.background-home h3 {
    margin: 0;
    font-family: "NeueHaasGrotesk bold";
    text-shadow: 2px 2px #3b3b3b;
    border: 3px solid white;
    padding: 5px;
    display: inline;
}

.background-home li:nth-child(1) {
    border-top: 0;
}

.background-home li:nth-child(2) {
    margin-top: 20px;
    margin-bottom: 20px;
}

.background-home li:nth-child(3) {
    margin-top: 20px;
    margin-bottom: 20px;
}

.background-home li:nth-child(4) {
    border-bottom: 0;
}

<main class="main-index">
        <h2>different spots</h2>
        <p>your feedback matters</p>
        <img alt="feedback page indicator" src="img/more-info-arrow-black.svg">
        <a href="feedback.html">feedback</a>
        <p>Just like every student, you as an international student can get discount in several clubs and bars in Amsterdam. This ticket will save you time and money!</p>
        <a href="https://www.tiqets.com/en/amsterdam-c75061/amsterdam-nightlife-clubs-free-drinks-p973786" target="_blank">Tickets for Amsterdam Nightlife &amp; Clubs + Free Drinks</a>
        <nav>
            <ul class="background-home">
                <li>
                    <a href="clubs.html"><h3>clubs</h3></a>
                </li>
                <li>
                    <a href="bars.html"><h3>bars</h3></a>
                </li>
                <li>
                    <a href=""><h3>music</h3></a>
                </li>
                <li>
                    <a href=""><h3>festivals</h3></a>
                </li>
            </ul>
        </nav>
    </main>

Solution

Instead of:

.main-index a:nth-child(4) {}

You can use:

.main-index > a:nth-of-type(1) {}

You can read the difference about these pseudo-classes:

:nth-child()

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.
:nth-of-type()

The :nth-of-type(an+b) CSS pseudo-class matches an element that has an+b-1 siblings with the same element name before it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument. This is a more flexible and useful pseudo selector if you want to ensure you're selecting the same type of tag no matter where it is inside the parent element, or what other different tags appear before it.

.main-index h2 {
  height: 60px;
  text-align: center;
  line-height: 60px;
  background-color: #3b3b3b;
  color: white;
  font-size: 25px;
  letter-spacing: 1px;
  margin: 0;
  font-family: "LemonMilk";
}
/********************************************
3.0 feedback
*********************************************/

.main-index p:nth-of-type(1) {
  margin: 15px 0 0 10px;
  text-transform: uppercase;
  font-size: 14px;
  float: left;
  font-family: "NeueHaasGrotesk Light";
}
.main-index p:nth-of-type(2) {
  clear: both;
  margin-top: 10px;
  display: inline-block;
}
.main-index img {
  margin: 10px 0 0 5px;
  height: 25px;
  float: left;
}
.main-index > a:nth-of-type(1) {
  float: right;
  margin: 7px 10px 0 0;
  padding: 10px;
  background-color: #0e8f9c;
  color: white;
  border: none;
  font-size: 13px;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-family: "NeueHaasGrotesk medium";
}
/********************************************
5.0 Ticket Info International Student
*********************************************/

.main-index p:nth-of-type(2) {
  margin: 10px;
  font-size: 18px;
}
.main-index a:nth-child(6) {
  background-color: #d3464e;
  padding: 10px;
  margin: 15px;
  display: block;
  text-align: center;
}
/********************************************
6.0 main content
*********************************************/

.background-home {
  background-image: url(../img/goingoutparadiso.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 80%;
  padding: 20px 0;
}
.background-home li {
  text-align: center;
  line-height: 90px;
  font-size: 50px;
  border-bottom: 5px solid white;
  border-top: 5px solid white;
  box-shadow: 1px 1px 2px #3b3b3b;
  text-transform: uppercase;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
}
.background-home a {
  display: block;
}
.background-home h3 {
  margin: 0;
  font-family: "NeueHaasGrotesk bold";
  text-shadow: 2px 2px #3b3b3b;
  border: 3px solid white;
  padding: 5px;
  display: inline;
}
.background-home li:nth-child(1) {
  border-top: 0;
}
.background-home li:nth-child(2) {
  margin-top: 20px;
  margin-bottom: 20px;
}
.background-home li:nth-child(3) {
  margin-top: 20px;
  margin-bottom: 20px;
}
.background-home li:nth-child(4) {
  border-bottom: 0;
}

<main class="main-index">
  <h2>different spots</h2>
  <p>your feedback matters</p>
  <img alt="feedback page indicator" src="img/more-info-arrow-black.svg">
  <a href="feedback.html">feedback</a>
  <p>Just like every student, you as an international student can get discount in several clubs and bars in Amsterdam. This ticket will save you time and money!</p>
  <a href="https://www.tiqets.com/en/amsterdam-c75061/amsterdam-nightlife-clubs-free-drinks-p973786" target="_blank">Tickets for Amsterdam Nightlife &amp; Clubs + Free Drinks</a>
  <nav>
    <ul class="background-home">
      <li>
        <a href="clubs.html"><h3>clubs</h3></a>
      </li>
      <li>
        <a href="bars.html"><h3>bars</h3></a>
      </li>
      <li>
        <a href=""><h3>music</h3></a>
      </li>
      <li>
        <a href=""><h3>festivals</h3></a>
      </li>
    </ul>
  </nav>
</main>

The problem with using a lot of pseudo-classes is that if your markup changes, your CSS will break.

I recommend adding a class to the <a> element you want to add styles to instead of using a lot of pseudo-classes for the following reasons:

Easier to maintain.
Reusability (You can use the same class on multiple elements.)
Styles won't break changing your markup.