How to align-center this tittle?

HTML-CSS
1

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>
    <div class="home__container">

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

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

        <br>

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

    </div>
</div>

CSS:

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;
  }
}

CodePen: https://codepen.io/ricardorien/pen/xxdpMNO

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

center-text
center-text765×230 9.54 KB

2

Hi it should work like that:

.home__container p{
text-align: center;
}

1 Like
3

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

4

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