How do I align anchor items?-CodePudding

I know the question can be a little weird to understand, so I'll try to explain the best I can the problem

I was trying to align some items but I don't know why one of them is below the other by a few pixels. [This is how it looks][1]

As far as I know, in my code, nothing is making that second item to be some pixels below the others

body{
    text-align: center;
    background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(168,18,9,1) 35%, rgba(82,0,19,1) 100%);
    font-family: 'Roboto', sans-serif;
    color: white;
    margin: 0;
}
header{
    border-bottom: 1px solid black;
    padding: 20px;
}
#primero{
    display: flex;
    text-align: center;
    align-items: center;
    align-content: center;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    float: left;
}
h1{
    margin-left: 5px;
    margin-right: 5px;
}
#opciones{
    display: flex;
    border-bottom: 1px solid black;
    height: 150px;

}
#ophome{
    text-decoration: none;
    color: white;
    margin: 25px auto;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
    display: flex;
    height: 75px;
    width: 150px;
    text-align: center;
    align-items: center;
    align-content: center;
    justify-content: center;
}
#ophome:hover{
    padding: 20px;
    transition-duration: 0.25s;
}

#spotify{
    border-bottom: 1px solid black;
}
#notifoto{
    border-radius: 5px;
    margin: 5px;
}
#opnoticias{
    text-decoration: none;
    color: white;
    margin: 25px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
    display: inline-block;
    height: 250px;
    width: 250px;
    text-align: center;
    align-items: center;
    align-content: center;
    justify-content: center;
}
#opnoticias:hover{
    padding: 20px;
    transition-duration: 0.25s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="CAFestilos.css">
    <title>HuancayoCAF</title>
</head>
<body>
    <header>
        La página oficial del mejor equipo peruano
    </header>

    <div id="primero">
        <img src="icons/huancayoCAF.png" alt="LogoHuancayoCAF" height="150px">
        <h1>HUANCAYO CAF</h1>
            
    </div>


    <div id="opciones">
        <a id="ophome" href="plantilla.html">Nuestros jugadores</a>
        <a id="ophome" href="et.html ">Nuestro equipo técnico</a>
        <a id="ophome" href="valores.html">Nuestros valores</a>
        <a id="ophome" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Miranos entrenar aquí</a>
        <a id="ophome" href="https://instagram.com/sga_go?igshid=YmMyMTA2M2Y=">Contenido HOT del equipo, aquí</a>
    </div>

    <div id="spotify">
        <h2>Escucha tu playlist de mrd mientras miras este sinsentido</h2>
        <p>(Advertencia, no se puede bajar volumen, cuidado con tus oidos)</p>
        <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/2yAjjqcHMy6qUI6NNzNoVD?utm_source=generator&theme=0" width="75%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
    </div>
<!-- the problem starts here -->
    <div>
        <h2>Noticias</h2>
        <a id="opnoticias" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><img id="notifoto" src="icons/doping.jpg" alt="imagendoping" height="150px"><p>Kurt Fritz y Vincenzo Garavito dan positivo a 15 drogas diferentes previo al partido</p></a>
        <a id="opnoticias" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><img id="notifoto" src="icons/evasion.jpg" alt="imagendoping" height="150px"><p>Embargan la casa de Alex Valera por evasión de impuestos</p></a>
        <a id="opnoticias" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><img id="notifoto" src="icons/07290983.normal.jpg" alt="imagendoping" height="150px"><p>Deportan a Gago de Australia luego de no encontrar el paradero del bus</p></a>
        <a id="opnoticias" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><img id="notifoto" src="icons/kfc.png" alt="imagendoping" height="150px"><p>Marcus Thuram renueva en el Huancayo CAF por S/5000 y un KFC</p></a>
    </div>
</body>
</html>

If someone can figure it out, it would help me a lot [1]: https://i.stack.imgur.com/zoGNi.png

CodePudding user response：

Use this code:

.opciones {
  display: table; /* Make the container element behave like a table */
  width: 100%; /* Set full-width to expand the whole page */
}

.col {
  display: table-cell; /* Make elements inside the container behave like table cells */
}

<div >
  <div  style="background:orange">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>
<div  style="background:green">
    <a id="ophome" href="plantilla.html">Nuestros jugadores</a>
</div>
<div  style="background:orange">
    <a id="ophome" href="et.html ">Nuestro equipo técnico</a>
</div>
<div  style="background:blue">
    <a id="ophome" href="valores.html">Nuestros valores</a>
</div>
<div >
    <a id="ophome" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Miranos entrenar aquí</a>
</div>
<div  style="background:orange">
    <a id="ophome" href="https://instagram.com/sga_go?igshid=YmMyMTA2M2Y=">Contenido HOT del equipo, aquí</a>
</div>

</div>

CodePudding user response：

body{
    text-align: center;
    background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(168,18,9,1) 35%, rgba(82,0,19,1) 100%);
    font-family: 'Roboto', sans-serif;
    color: white;
    margin: 0;
}
#Not-inn {
    float: left;
    display: flex;
    width: 100%;
    align-content: flex-start;
    justify-content: center;
  flex-wrap: wrap;
}
header{
    border-bottom: 1px solid black;
    padding: 20px;
}
#primero{
    display: flex;
    text-align: center;
    align-items: center;
    align-content: center;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    float: left;
}
h1{
    margin-left: 5px;
    margin-right: 5px;
}
#opciones{
    display: flex;
    border-bottom: 1px solid black;
    height: 150px;

}
#ophome{
    text-decoration: none;
    color: white;
    margin: 25px auto;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
    display: flex;
    height: 75px;
    width: 150px;
    text-align: center;
    align-items: center;
    align-content: center;
    justify-content: center;
}
#ophome:hover{
    padding: 20px;
    transition-duration: 0.25s;
}

#spotify{
    border-bottom: 1px solid black;
}
#notifoto{
    border-radius: 5px;
    margin: 5px;
}
#opnoticias{
    text-decoration: none;
    color: white;
    margin: 25px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
    display: inline-block;
    height: 250px;
    width: 250px;
    text-align: center;
    align-items: center;
    align-content: center;
    justify-content: center;
}
#opnoticias:hover{
    padding: 20px;
    transition-duration: 0.25s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="CAFestilos.css">
    <title>HuancayoCAF</title>
</head>
<body>
    <header>
        La página oficial del mejor equipo peruano
    </header>

    <div id="primero">
        <img src="icons/huancayoCAF.png" alt="LogoHuancayoCAF" height="150px">
        <h1>HUANCAYO CAF</h1>
            
    </div>


    <div id="opciones">
        <a id="ophome" href="plantilla.html">Nuestros jugadores</a>
        <a id="ophome" href="et.html ">Nuestro equipo técnico</a>
        <a id="ophome" href="valores.html">Nuestros valores</a>
        <a id="ophome" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Miranos entrenar aquí</a>
        <a id="ophome" href="https://instagram.com/sga_go?igshid=YmMyMTA2M2Y=">Contenido HOT del equipo, aquí</a>
    </div>

    <div id="spotify">
        <h2>Escucha tu playlist de mrd mientras miras este sinsentido</h2>
        <p>(Advertencia, no se puede bajar volumen, cuidado con tus oidos)</p>
        <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/2yAjjqcHMy6qUI6NNzNoVD?utm_source=generator&theme=0" width="75%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
    </div>
<!-- the problem starts here -->
    <div  id="Noticias">
        <h2>Noticias</h2>
        <div  id="Not-inn">
            <a id="opnoticias" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><img id="notifoto" src="icons/doping.jpg" alt="imagendoping" height="150px"><p>Kurt Fritz y Vincenzo Garavito dan positivo a 15 drogas diferentes previo al partido</p></a>
            <a id="opnoticias" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><img id="notifoto" src="icons/evasion.jpg" alt="imagendoping" height="150px"><p>Embargan la casa de Alex Valera por evasión de impuestos</p></a>
            <a id="opnoticias" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><img id="notifoto" src="icons/07290983.normal.jpg" alt="imagendoping" height="150px"><p>Deportan a Gago de Australia luego de no encontrar el paradero del bus</p></a>
            <a id="opnoticias" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><img id="notifoto" src="icons/kfc.png" alt="imagendoping" height="150px"><p>Marcus Thuram renueva en el Huancayo CAF por S/5000 y un KFC</p></a>
        </div>
    </div>
</body>
</html>