Why is my div nesting in the previous div, seemingly unnecessarily? (This should be a quick review as there's not much code)

Please can anyone assist with why my div of class “methodology” seems to be nesting in the previous div (of class "codecademy_requirements)?

<!DOCTYPE html>
<html>
<head>
    <title>Smasha's Cheatsheet</title>
    <link href="./css/styles.css" type="text/css" rel= "stylesheet">
</head>

<body>
    <header>
        <h1>Smasha's Cheatsheet</h1>
    </header>
    <div class="initial_notes">
        <h2>These are the things I'd like to include:</h2>
        <ul>
            <li>How to link the Stylesheet</li>
            <li>What else to include in the head element</li>
            <li>Quick notes on the use of Display Command, ie relative, absolute etc</li>
            <li>Quick notes on the use of the Position Command, ie block, inline-block etc</li>
            <li>Potentially notes on how to import fonts</li>
        </ul>
    </div>

    <div class="codecademy_requirements">
        <h2>These are the requirements listed on Codecademy site for this Project:</h2>
        <ol>
            <li>To complete this project, you should have completed the codecademy Introduction to HTML course through the HTML tables lesson, and lessons in Learn CSS: Selectors and Visual Rules.</li>
            <li>Your project should document at least one HTML or CSS topic. In our example project, we documented the tags and attributes used in HTML tables layouts, but you can choose any HTML or CSS topic that you’ve learned so far—the sky is the limit!

                <br>
                Possible topics could be:
                <br>
                HTML Tables, Other HTML tags, CSS selectors and specificity, Common CSS properties
                <br>
                If you choose to document HTML tags, open the hint to see how to include HTML tags as text in your code.</li>
            <li>
                Your site uses HTML tables to display the documentation. Be sure to label the columns in your HTML.
                
                In our example site, we used tables with columns for:
                
                The tag or attribute name
                The actual formatted tag (eg. <table>)
                A description of what to use the tag for.
                You can use these same columns or choose your own.</li>
            <li>
                Your site should utilize a custom color scheme. You can use any of the named CSS colors.</li>
            <li>
                Your site should use custom styles for any code such as HTML tags (like h1) or CSS properties or values (like font-family). Represent code using a monospace font family and a different background color.</li>
            <li>
                Great work! Visit our forums to compare your project to our sample solution code. You can also learn how to host your own solution on GitHub so you can share it with other learners!
                
                Your solution might look different from ours, and thats okay! There are multiple ways to solve these projects, and youll learn more by seeing others code.
                
                If youd like to extend your cheat sheet, keep adding new topics to it as you continue to learn more HTML, CSS, and more. As you become more advanced with CSS, youll also be able to improve the styling and layout of the cheat sheet itself.</li>
        </ol>
    </div>
    <div class="methodology">
        <h2>Ideas of how to proceed with this project:</h2>
        <ul>
            <li>Set up an empty table at first</li>
            <li>Move all of these notes to footer (to come after table)</li>
            <li>Fill contents of table</li>
        </ul>
    </div>
   </body>
</html>
````Preformatted text`


h1 {
color: rgba(220, 20, 169, 0.9);
text-transform: uppercase;
}

.initial_notes {
    background-color: cornflowerblue;
}

.codecademy_requirements {
    background-color: seagreen;
}

.methodology {
    background-color: lightsalmon;
}

I am currently completing the “Challenge Project: Complete Your Own Cheatsheet” and had decided to lay out a few notes prior to commencing the task.

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-improved-styling-with-css/modules/wdcp-22-build-your-own-cheat-sheet/projects/independent-project-html-documentation

In your html file, you have:

                In our example site, we used tables with columns for:
                
                The tag or attribute name
                The actual formatted tag (eg. <table>)
                A description of what to use the tag for.
                You can use these same columns or choose your own.

If you look at your screenshot, you will see that the text <table> is not displayed. The browser interprets this as the html tag for table, but that isn’t your intention. You didn’t want to insert a table. You wanted to write the text <table>
You can escape this by editing the text

The actual formatted tag (eg. <table>)
to
The actual formatted tag (eg. &lt;table&gt;)
Now the sentence will show up as: “The actual formatted tag (eg. <table>)”

Have a look at

2 Likes

Legend, thanks so much!