Align Title Center, and content to title's left

by Hugo Vale Pereira

HTML

<h1>
Este fiddle mostra como é possível alinhar conteúdo à esquerda de um titulo que está centrado.
</h1>

<div class="bloco">
  <div>
     <h1>Títado</h1>
  
     <ul>
     <li>Lorem ipsum dolor sit a</li>
      <li>Lorem ipsum dr sit a</li>
      <li>Lorem ipsum dolor sit a</li>
      <li>Lorem ipsum dr sit a</li>
    </ul>
   
  </div>
 
</div>


<div class="bloca">
  <div>
     <h1>Tíjutado DOI</h1>
   
     <ul>
     <li><span>Lorem ievewrfwerfwerwerfwerffwerfpsum dolor sit a</span></li>
     <li><span>Lorem ipsum dolor sit a</span></li>
     <li><span>Lorem ipsum dolor sit a</span></li>


    </ul>
   
  </div>
 
</div>


<details>

  <summary>Hugo</summary>
  <div>BLABLA</div>

</details>

CSS

.bloco {

  width: 400px;
  outline: 1px solid red;
/*   resize: both; */
}

.bloco div{
  margin:auto;
  position:relative;
  width: max-content;
  background: lightblue;
}

.bloco h1 {

}

.bloco ul {
  text-align: left;
  position: absolute;
  left: 0;
  width: 300px;
  
  
  
  padding: 0;

}






.bloca {
  margin-top: 200px;
  width: 400px;
  outline: 1px solid red;
}

.bloca div{
  margin:auto;
  width: max-content;
  background: lightblue;
}

.bloca h1 {

}

.bloca ul {
 
  
 
 
  
  
  li{
    position: relative;
    span{
      position:absolute;
      width:max-content;
    }
  }
  
  padding: 0;

}