How to align-center this tittle?

Hi folks!
I’m confused, why I can’t align the title when width = 450px or less. I been trying with everything! this problem drives me crazy, I thought wold be easy.
Heres the code and a link to CodePen:

<!-------------------- Main ------------------------->
    <div class="home__container">

        <h1 class="home__title">La Gran Cuspide</h1>

        <a class="home__primary-button" href="">View App</a>


        <p class="home__phrase">
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat eius minus quisquam impedit quisquam imped.".



body{ background: #272727;}
/* ~ ~ ~ ~ ~ Home ~ ~ ~ ~ ~
.home__container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-justify: middle; */
  flex-direction: column;
  padding-top: 15em;
  max-height: 70%;

/* Title - Home 
.home__title {
  color: white;
  font-size: 7rem; 
  letter-spacing: 4px;

/* Button-Primary - Home
.home__primary-button {
  color: #FFFF29;
  background-color: transparent;
  font-size: 2rem; 
  outline: none;
  padding:  0.425em 1.5em;
  font-weight: bold;
  text-decoration: none;  
  text-align: center;
  border-radius: 30px;
  transition: 0.30s;
  cursor: pointer;  
  border: 5px solid #FFFF29;

.home__primary-button:active {
  box-shadow: inset 0 0 30px #FFFF29;

/* Phrase - Home
.home__phrase {
  font-size: 1.4rem;
  color: white;
  font-style: italic; 

/*----------------- PROBLEM HERE -----------------*/
@media (max-width: 450px) {
  .home__title {
    color: red;


Main goal: Have the Title centered like center section in this image:

Hi it should work like that:

.home__container p{
text-align: center;

1 Like

Thanks! Css Its so confusing some time! 2 years and I’m still struggling

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.