The elements of the second box overlapping

Hello there! I am working on the project called : “Build a Website Design System”

link:
https://www.codecademy.com/paths/full-stack-engineer-career-path-21/tracks/fscp-improved-styling-with-css/modules/fecp-challenge-project-build-a-website-design-system/projects/independent-project-web-design-system#page-skip-to-content-target

and the elements of the Fonts box that I created, overlap with other elements and with each other, whenever I try to resize the page. Since I am currently learning display, box model and positioning, could someone enlighten me why that happens? In addition, the main title of the webpage loses its initial position as soon as the browser window is getting resized.
I tried to imitate in appearance the example that codecademy gave as solution, which is pretty stable while resizing the browser window. You can find it here:

https://content.codecademy.com/PRO/independent-practice-projects/website-design-system/example/index.html

Any help much appreciated and thank you in advance.

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Design System</title>
    <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=Nunito+Sans:ital,wght@0,400;0,700;1,400&family=Poppins:ital,wght@0,400;0,700;1,400&family=Source+Code+Pro:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <link href="styles.css" rel ='stylesheet'>    
<body>
    <header>
        <h1>My Website Style Guide</h1>
    </header>
    <main>
      <div class ='container_colors'>
        <h2>Colors</h2>
        <div>
          <section class ='blue'>
              <p>Cool Blue</p>
              <p>#2d5dcc</p>
          </section>
          <section class ='pink'>
              <p>Pink</p>
              <p>#d957d9</p>
          </section>
          <section class ='green'>
              <p>Mint Green</p>
              <p>#4fe0b0</p>
          </section>
          <section class ='beige'>
            <p>Beige</p>
            <p>#efd9ca</p>
          </section>
        </div>
      </div>
      <div class = 'container_fonts'>
        <h2>Fonts</h2>
        <section class ='source'>
            <p class ="title_s"><u>Source Code Pro</u></p>
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p class="bold_s">The quick brown fox jumps over the lazy dog.</p>
            <p class="italic_s">The quick brown fox jumps over the lazy dog.</p>
        </section>
        <section class ='nunito'>
            <p class="title_n"><u>Nunito Sans</u></p>
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p class="bold_n">The quick brown fox jumps over the lazy dog.</p>
            <p class="italic_n">The quick brown fox jumps over the lazy dog.</p>
        </section>
        <section class ='poppins'>
            <p class="title_p"><u>Poppins</u></p>
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p class="bold_p">The quick brown fox jumps over the lazy dog.</p>
            <p class="italic_p">The quick brown fox jumps over the lazy dog.</p>
        </section>
      </div>

      <div class = 'container_styles'>
        <h2>Text Styles</h2>
        <section class ='heading1'>
           <h1>H1: Main page heading</h1>
           <ul>
             <li>Font-weight: 700 (bold)</li>
             <li>Font-size: 26px</li>
             <li>Font-family: Nunito Sans</li>
           </ul>
        </section>
        <section class ='heading2'>
            <h2>H2: Subheading</h2>
            <ul>
              <li>Font-weight: 500</li>
              <li>Font-size: 18px</li>
              <li>Font-family: Poppins</li>
            </ul>
        </section>
        <section class ='heading3'>
            <p>P: Paragraph text</p>
            <ul>
              <li>Font-weight: 400 (regular)</li>
              <li>Font-size: 14px</li>
              <li>Font-family: Poppins</li>
            </ul>
        </section>
      </div>
    </main>
</body>
</html>


header h1 {
    margin-left: 175px;
}

.container_colors {
    border: 2px solid gray;
    width: 80%;
    height: 320px;
    padding-left: 20px ;
    margin: 10px auto;
    font-family: 'Nunito Sans', sans-serif;
}

.container_fonts {
    border: 2px solid gray;
    width: 80%;
    height: 470px;
    padding-left: 20px ;
    margin: 10px auto;
}

.container_styles {
    border: 2px solid gray;
    width: 80%;
    height: 470px;
    padding-left: 20px ;
    margin: 10px auto;
    font-family: 'Nunito Sans', sans-serif;
}

.container_fonts h2 {
    font-family: 'Nunito Sans', sans-serif;
}
.container h2 {
    text-align: left;
}

.blue {
    display: inline-block;
    background-color: #2d5dcc;
    width: 30%;
    height: 100px;
    text-align: center;
    color: white;
}

.pink {
    display: inline-block;
    background-color: #d957d9;
    width: 30%;
    height: 100px;
    text-align: center;
}

.green {
    display: inline-block;
    background-color: #4fe0b0;
    width: 30%;
    height: 100px;
    text-align: center;
}

.beige {
    display: inline-block;
    background-color: #efd9ca;
    width: 30%;
    height: 100px;
    text-align: center;
    margin-top: 20px;
}

.title_s {
    font-family: 'Source Code Pro', monospace;
}

.title_n {
    font-family: 'Nunito Sans', sans-serif;
}

.title_p {
    font-family: 'Poppins', sans-serif;
}

.bold_s {
    font-weight: 700;
    font-family: 'Source Code Pro', monospace;
}

.bold_n {
    font-weight: 700;
    font-family: 'Nunito Sans', sans-serif;
}

.bold_p {
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
}

.italic_s {
    font-style: italic;
    font-family: 'Source Code Pro', monospace;
}

.italic_n {
    font-style: italic;
    font-family: 'Nunito Sans', sans-serif;
}

.italic_p {
    font-style: italic;
    font-family: 'Poppins', sans-serif;
}

.source {
    display: inline-block;
}

.nunito {
    display: inline-block;
    margin-left: 200px;
}

.poppins {
    margin-top: 50px;
    width: 25%;
}

.heading1 h1 {
    font-weight: 700;
    font-size: 26px;
}

.heading2 h2 {
    font-weight: 500;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
}

.heading3 p {
    font-weight: 400;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
}

Hi there,

So–a simple problem you’re having comes from the height of your containers.

When you shrink your browser, the text becomes compacted and its height grows. Because its height grows, it becomes larger than its parent container and overflows. A simple fix could be to remove the set height. Doing so would allow the parent container to grow as the child element grows. You could also use overflow to change how the browser handles elements that overflow. e.g. overflow: hidden would hide the overflowing text.

You’ll find it much easier to handle some of the problems you come across when you get to flex and grids.

1 Like

Thank you so much! I removed it and everything worked like a charm. I have a small question though. Initially, I used the height property for the fonts container, because as soon as I added the child elements in it (before using the height property), part of them was overlapping the container and was beyond container’s borders. So to fix that I expanded the container’s height. Now that I removed it, all the child elements stayed inside parent container’s borders unlike the beginning. It just looks strange to me.

Well–I’m not quite sure how your project was looking at the beginning. All I can say is that your page(s) will continue to change as you add styling to them. If you’d like to figure it out, consider deconstructing your site with developer tools. Add and remove styling(s) and see how your site adapts to live changes. I have found that doing so makes it easier for me to learn personally.

1 Like