CODEWITHSUNDEEP
javascripthtmlcss
Benjamin Nüssli
Benjamin Nüssli

Reputation: 11

Items not aligning properly in CSS container

I am practicing JavaScript and CSS by following a YouTube tutorial.

Here is a link to the GitHub repo, where the script is found.

I typed the entire code by hand, so that I could get more familiar with it. And when opening index.html in my browser, the content is displayed at the very bottom and very right, rather than being centered as it should. I thought maybe I had a typo, so I copied and pasted the entire code from GitHub and refreshed it, still no change. What could I be doing wrong? Could the issue lie in index, rather than the script?

Here is my code:

:root {
  background-color: #ecf5ff;
  font-size: 62.5%;
}

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
}

h1,
h2,
h3,
h4 {
  margin-bottom: 1rem;
}

h1 {
  font-size: 5.4rem;
  color: #56a5eb;
  margin-bottom: 5rem;
}

h1 > span {
  font-size: 2.4rem;
  font-weight: 500;
}

h2 {
  font-size: 4.2rem;
  margin-bottom: 4rem;
  font-weight: 700;
}

h3 {
  font-size: 2.8rem;
  font-weight: 500;
}

/* UTILITIES */

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 80rem;
  margin: 0 auto;
}

.container > * {
  width: 100%;
}

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

.flex-center {
  justify-content: center;
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.text-center {
  text-align: center;
}

.hidden {
  display: none;
}

/* BUTTONS */
.btn {
  font-size: 1.8rem;
  padding: 1rem 0;
  width: 20rem;
  text-align: center;
  border: 0.1rem solid #56a5eb;
  margin-bottom: 1rem;
  text-decoration: none;
  color: #56a5eb;
  background-color: white;
}

.btn:hover {
  cursor: pointer;
  box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
  transform: translateY(-0.1rem);
  transition: transform 150ms;
}

.btn[disabled]:hover {
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="widh=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Quick Quiz</title>
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>

    <div class="container"></div>
      <div id="home" class="flex-center flex-column"></div>
        <h1>Oberlingual</h1>
        <a class="btn" href="/game.html">Play</a>
        <a class="btn" href="/highscores.html">High scores</a>

  </body>
</html>

Upvotes: 1

Views: 134

Answers (2)

crati
crati

Reputation: 129

Html code has 2 mistakes. 2 div elements don't have any child elements because you closed each element at the wrong position. This code will work:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="widh=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Quick Quiz</title>
    <link rel="stylesheet" href="app.css" />
  </head>  
  <body>
    <div class="container">
      <div id="home" class="flex-center flex-column">
        <h1>Oberlingual</h1>
        <a class="btn" href="/game.html">Play</a>
        <a class="btn" href="/highscores.html">High scores</a>
       </div>
    </div>
  </body>
</html>

Upvotes: 1

s.kuznetsov
s.kuznetsov

Reputation: 15223

You got confused with </div> closing tags. Here's your mistake:

<div class="container"></div>
      <div id="home" class="flex-center flex-column"></div>
...

This way, you are not wrapping internal content in parent containers - div tags.

You need to close the div in sequence.

This is how you need to do it, and your code will work:

<div class="container">
 <div id="home" class="flex-center flex-column">
  <h1>Oberlingual</h1>
  <a class="btn" href="/game.html">Play</a>
  <a class="btn" href="/highscores.html">High scores</a>
 </div>
</div>

Run this snippet to check here:

:root {
  background-color: #ecf5ff;
  font-size: 62.5%;
}

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
}

h1,
h2,
h3,
h4 {
  margin-bottom: 1rem;
}

h1 {
  font-size: 5.4rem;
  color: #56a5eb;
  margin-bottom: 5rem;
}

h1 > span {
  font-size: 2.4rem;
  font-weight: 500;
}

h2 {
  font-size: 4.2rem;
  margin-bottom: 4rem;
  font-weight: 700;
}

h3 {
  font-size: 2.8rem;
  font-weight: 500;
}

/* UTILITIES */

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 80rem;
  margin: 0 auto;
}

.container > * {
  width: 100%;
}

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

.flex-center {
  justify-content: center;
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.text-center {
  text-align: center;
}

.hidden {
  display: none;
}

/* BUTTONS */
.btn {
  font-size: 1.8rem;
  padding: 1rem 0;
  width: 20rem;
  text-align: center;
  border: 0.1rem solid #56a5eb;
  margin-bottom: 1rem;
  text-decoration: none;
  color: #56a5eb;
  background-color: white;
}

.btn:hover {
  cursor: pointer;
  box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
  transform: translateY(-0.1rem);
  transition: transform 150ms;
}

.btn[disabled]:hover {
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="widh=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Quick Quiz</title>
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>

    <div class="container">
     <div id="home" class="flex-center flex-column">
      <h1>Oberlingual</h1>
      <a class="btn" href="/game.html">Play</a>
      <a class="btn" href="/highscores.html">High scores</a>
     </div>
    </div> 
     
  </body>
</html>

Upvotes: 0

Related Questions