Why is my text in HTML not getting centered-CodePudding

I am working on a portfolio and I am trying to center a section, I used the "display: grid;" CSS tag and then used "place-content:" too! Here is my code

@import url('https://fonts.googleapis.com/css2?family=Roboto Mono:wght@700&display=swap');
html body {
  background: #0E1212;
  font-family: 'Roboto Mono', monospace;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: none;
  font-family: 'Roboto Mono', monospace;
}

li {
  float: left;
}

li a {
  display: block;
  color: #DBDBDB;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: #622cd8;;
  transition: 0.5s;
  animation-name: example;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.active {
  color: #808080;
}

.active:hover {
  color: #808080;
  animation-name: active;
}

@keyframes active {
  0% {
    color: #808080;
  }
  100% {
    color: #808080;
  }
  }
 
  @keyframes example {
    0% {
      color: #DBDBDB;
    }
    100% {
      color: #622cd8;
      
    }

section {
  display: grid;
  place-items: center;
  place-content: center;
  min-height: 100vh
}

<body>
</head>
<body>

<ul id='menu'>
  <li><a  href="#home" id="home">.home()</a></li>
  <li><a  href="#news">.about()</a></li>
  <li><a  href="#contact">.stuffs()</a></li>
  <li><a  href="#about">.apply()</a></li>
</ul>

<h1 style="color:#622cd8;">Hi</h1>
  
  <section >

<h1 style="color:#622cd8;;">welcome</h1>
    <p>this is my website</p>
    
  </section>
</body>

I made sure I referenced the section, and aligned the items in the center, what am I doing wrong? I am a beginner in web design so bear with me, and if possible, give me some advice for next time.

CodePudding user response：

You can center any block element with margin:auto and a width.

.center {
  margin: 0 auto;
  width: max-content;
}

<section >
  <h1>Welcome</h1>
  <p>this is my website</p>
</section>
<section>
  <h1>More</h1>
  <p>this is not a centered section</p>
</section>

Or you can use flexbox on the parent, and align-self:center on the child you want to center

.main {
  display: flex;
  flex-direction: column;
}

section.center {
  align-self: center;
}

<div >
  <section >
    <h1>Welcome</h1>
    <p>this is a centered section</p>
  </section>
  <section>
    <h1>More</h1>
    <p>this is not a centered section</p>
  </section>
</div>

Or if you want to use grid with justify-content:center, you can apply it to the parent of the sections to center every section.

.main {
  display: grid;
  justify-content: center;
}

<div >
  <section>
    <h1>Welcome</h1>
    <p>this is a centered section</p>
  </section>
  <section>
    <h1>More</h1>
    <p>this is also a centered section</p>
  </section>
</div>

CodePudding user response：

your keyframe before the section wasn't closed. you forgot to close it with }

My advice and personal opinion is to use a simple responsive design with flex display instead of grid. unless you know how to manipulate grid well. then go for it.

@import url('https://fonts.googleapis.com/css2?family=Roboto Mono:wght@700&display=swap');
html body {
  background: #0E1212;
  font-family: 'Roboto Mono', monospace;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: none;
  font-family: 'Roboto Mono', monospace;
}

li {
  float: left;
}

li a {
  display: block;
  color: #DBDBDB;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: #622cd8;;
  transition: 0.5s;
  animation-name: example;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.active {
  color: #808080;
}

.active:hover {
  color: #808080;
  animation-name: active;
}

@keyframes active {
  0% {
    color: #808080;
  }
  100% {
    color: #808080;
  }
  }
 
  @keyframes example {
    0% {
      color: #DBDBDB;
    }
    100% {
      color: #622cd8;
      
    }
  }

section {
  display: grid;
  place-items: center;
  place-content: center;
  min-height: 100vh
}

  <body>

    <ul id='menu'>
      <li><a  href="#home" id="home">.home()</a></li>
      <li><a  href="#news">.about()</a></li>
      <li><a  href="#contact">.stuffs()</a></li>
      <li><a  href="#about">.apply()</a></li>
    </ul>
    
    <h1 style="color:#622cd8;">Hi</h1>
      
      <section >
    
    <h1 style="color:#622cd8;;">welcome</h1>
        <p>this is my website</p>
        
      </section>
    
      
    </body>