<h1></h1> tag only partly responsive-CodePudding

The first h1 tag I use in my code works for me with the styling I'm going for but the second and third ones don't. The second one does not become a heading at all (just plain small text) and the third is too big.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>

<body>
    <img src="Logo.png" alt:"">
    <div class= "container">
    <nav>
      <ul>
        <li>About Us</li>
       <li>Services</li>
        <li>Continuing Education Courses</li>
        <li>Support Groups & Workshops</li>
        <li>First Appointment & Fees Insurance</li>
          <li>Blog</li>
        <li>Contact</li>
      </ul>
    </nav>
    <hr>
    <div >
    <img src="Group 1.png" alt="" align="center" width="300px" height="100px">
    <main>
    <section>
    <h1>Grounding and Resourcing Technique Giveaway</h1>
    <h2>
        Being a mental health clinician can be such an empowering and rewarding role. You can change,
help, and nourish so many of those struggling with everyday life. Through the responsibilities you take on while helping others, it’s so important to practice grounding and resourcing techniques with your clients.
    </h2>
    </section>
    
        <div 
    <h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for grounding and resourcing methods.</h1>
    <img src="Rectangle 817.png" alt="" align="left">
    <h2>
        Learn ways to keep your client grounded by establishing comfortability, learning breathing and body awareness techniques, object-based resourcing, and so much more. This handout will help you overcome some of those challenges you face daily as a mental health clinician while working with clients.
    </h2>
        <hr>
        <h1>Simply fill out the form below to download.</h1>
<h2>You will be sent a copy to your email.</h2>'''



h1 {
    color: #2B2B2B;
    white-space:normal;
    word-break: break-all;
    font-family: Georgia;
    text-align:center;
}

CodePudding user response：

There's a syntax error in your HTML. The following line is incomplete:

<div

Anything that comes after that line may produce unexpected results. You need to complete the opening div tag (and also close it somewhere, if that is your complete code).

<div >

CodePudding user response：

Use <style> tag to enclose the css.

<style>
h1 {
    color: #999999;
    white-space:normal;
    word-break: break-all;
    font-family: Georgia;
    text-align:center;
}
</style>

You also forgot the closing tag for div, though not entirely sure where you want the placement for closing tag would be.

<div ></div>

CodePudding user response：

If you are using vscode code editor, install Auto Close Tag extension if you haven't yet to avoid this kind of problem and Prettier extension as well is a big help for you to looks your code organize and easy to see what is wrong.

CodePudding user response：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>

<body>
    <img src="Logo.png" alt:"">
    <div class= "container">
    <nav>
      <ul>
        <li>About Us</li>
       <li>Services</li>
        <li>Continuing Education Courses</li>
        <li>Support Groups & Workshops</li>
        <li>First Appointment & Fees Insurance</li>
          <li>Blog</li>
        <li>Contact</li>
      </ul>
    </nav>
    <hr>
    <div >
    <img src="Group 1.png" alt="" align="center" width="300px" height="100px">
    <main>
    <h1>Grounding and Resourcing Technique Giveaway</h1>
    <section>
      <h2>
        Being a mental health clinician can be such an empowering and rewarding role. You can change,
 help, and nourish so many of those struggling with everyday life. Through the responsibilities you take on while helping others, it’s so important to practice grounding and resourcing techniques with your clients.
      </h2>
    </section>
    
    <div >
      <h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for grounding and resourcing methods.</h1>
      <img src="Rectangle 817.png" alt="" align="left">
      <h2>
        Learn ways to keep your client grounded by establishing comfortability, learning breathing and body awareness techniques, object-based resourcing, and so much more. This handout will help you overcome some of those challenges you face daily as a mental health clinician while working with clients.
      </h2>
       <hr>
       <h1>Simply fill out the form below to download.</h1>
       <h2>You will be sent a copy to your email.</h2>
    </div>
    <style>
      h1 {
        color: #2B2B2B;
        white-space:normal;
        word-break: break-all;
        font-family: Georgia;
        text-align:center;
      }
    </style>
</body>

You had a lot of errors such as no closing body or div tags, and now all of them are the same size.