Search code examples
htmlcssflexboxtext-align

Can't center h1 tag in CSS

enter image description hereI am a beginner web development student and I am having trouble centering the h1 text in my code. I am using the text-align: center property, but the text is not centering.

I am also having trouble getting equal space between the "pricing, features, and blog" menu and the "sign in" and "sign up" buttons.

I am using the justify-content: space-between property, but the space between the "pricing, features, and blog" menu and the buttons is less than the space between the buttons.

body {
  background: url(BG.png);
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 72px;
  margin-left: 80px;
  margin-right: 80px;
  /* border: 1px solid black; */
}

p.logo {
  color: white;
  font-size: 16px;
  font-weight: 700;
  /* border: 1px solid black; */
}

.menu {
  display: flex;
  gap: 56px;
  color: white;
  font-size: 16px;
  font-weight: 500;
  /* border: 1px solid black; */
}

.cta {
  display: flex;
  gap: 56px;
  font-size: 16px;
  font-weight: 500;
  /* border: 1px solid black; */
}

.cta > button {
  color: white;
  width: 122px;
  background-color: #091d57;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
}

h1 {
  color: white;
  font-size: 52px;
  font-weight: 800;
  max-width: 632px;
  text-align: center;
  border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Maze</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header>
      <p class="logo">Maze</p>
      <div class="menu">
        <p>Features</p>
        <p>Pricing</p>
        <p>Blog</p>
      </div>
      <div class="cta">
        <p>Sign in</p>
        <button>Sign up</button>
      </div>
    </header>
    <h1>Upgrade your skills for a better future</h1>
  </body>
</html>

I attempted to center the h1 text and distribute space evenly between the buttons, but my efforts were unsuccessful.

I have also searched for solutions online, but I have been unable to find a solution.

Solution

  • With your h1, the text is actually centered. (try setting the font-size: 16px to test, You will notice that the text is actually centered within the bordered box). But since you have set a max-width:623px; for the h1 and given a border, instead of having a full width now the width of your box is fixed, you can align the whole combination using CSS by setting margins auto on left and right.

    margin: 0 auto;

    Which means margin-left is auto and margin-right is auto, which sets the whole box to the center.

    Coming to your Part-B of the question. About having equal spacing between the menus items and buttons, the issue is:

    You have own container for menus (wrapper with class="menu") and a container (wrapper with a class="cta"), though within the containers of each of each of these, the space is equal, but on the whole header, we need to carefully place these items within the space available. Flexbox works with the space provided for items to be placed. So, you need to do this carefully as per the design. (Could you provide the design for menus please)

    Thanks

    enter image description here