Ol não aparece o número

HTML5

CSS3

16/11/2021

Pessoal, eu estou criando um projeto aqui de uma banda de rock, na página de discografia eu criei a lista ordenada para ficar as faixas na sequência. Porém, quando estou estilizando o CSS ele corta o número das faixas. Eu tentei algumas ideias para mover com padding, margin e etc, até funciona, porém detona com a barra horizontal fazendo um transbordo e quebra. Tentei movimentar com position, nada, só da certo com fixed o qual desativa a página. Eu pesquisei outros site para ver como eram feitas e alguns usam tabela, alguém pode me dar um help?
<!DOCTYPE html>
<html lang="pt">
<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">
<title>Discografia</title>
<link rel="stylesheet" href="Discografia.css">
<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=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Gruppo&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="menu">
<nav>
<ul type="none">
<li><a href="Gloriarock.html">GLØRIA</a></li>
<li><a href="Discografia.html">Discografia</a></li><!--Aqui será também em pagína, porém, musicas e curiosidade em lista-->
<li><a href="http://gloriarock.iluria.com/">Produtos oficiais</a></li>
<li><a href="mailto:contatogloriaoficial@gmail.com">Contrate o nosso show</a></li>
<li><a href="https://twitter.com/gloriarock">Twitter</a></li>
<li><a href="https://www.youtube.com/user/gloriavids">Youtube</a></li>
<li><a href="https://www.facebook.com/GloriaRock/">Facebook</a></li>
</ul>
</nav>
</div>
</header>
<main>
<h1 id="fotoEntrada"><img src="asset/Foto por LURINGA disc.jpg" alt="Gloria por Luringa" title="Foto por Luringa"></h1>
<h2 id="discografia">Discografia</h2>
<div id="ofim">
<h2><a href="https://soundcloud.com/gloriarock/sets/o-fim-e-uma-certeza" target="_blank">O fim é uma certeza</a></h2>
<img src="asset/O fim é uma certeza.jpg" alt="O fim é uma certeza" title="O fim é uma certeza">
<p>O primeiro disco da banda onde nasceram clássicos como "Piano Perfeito", "Verdades", e claro a música título o "O Fim é Uma Certeza".</p>
<ol class="faixas">
<li>Piano Perfeito</li>
<li>Quem Cai</li>
<li>Depois do Funeral</li>
<li>Muito Distante</li>
<li>O Último Inverno De Nossas Vidas</li>
<li>O Fim é Uma Certeza</li>
<li>O Sonho Acabou</li>
<li>Do You Still Hate Me?</li>
<li>Verdades</li>
<li>10 Mil Maneiras</li>
<li>Máscaras Vidros e Um Pouco de Angústia</li>
<li>Lembranças de Maio</li>
</ol>

/*Reset css*/
body, header, ul, li, nav, main, a, div, p, span, footer, h1, h2, h3, ol{ margin: 0;
    padding: 0;
}
body{background-color: black;}
.menu{ background-color: #333;
    white-space: nowrap;}
        
.menu nav ul { display: flex;
    background-color:black;
    list-style: none;}
.menu nav ul li {background-color:black;}
.menu nav ul li a {display: flex;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-family: ''Gruppo'', cursive;
    font-size: 20px;
}
.menu nav ul li a:hover{background-color:#333;}
#fotoEntrada img{ 
    height: 100%;
    width: 100%;}
#discografia{text-align: center; font-family: ''Permanent Marker'', cursive; color: white; font-size: 50px; margin-bottom: 92px;}
/*O fim é uma certeza*/
#ofim h2{font-size: 40px; color: white;}
#ofim img{width: 300px; height: 300px;}
#ofim p{font-size: 20px; color:white; margin-bottom: 30px;}        
#ofim .faixas{width: 100%; height: 100%; margin-left: 30px;}
#ofim .faixas li{color: white;}
#ofim .faixas #jaw{color: white;text-decoration: none;}
#ofim h3{color: white; margin-top: 30px;}
#ofim ul li{color: white; width: 100%; height: 100%; margin-left: 30px;}
Gabriel

Gabriel

Curtidas 1
POSTAR