Flexboxes growing bigger than parent / Padding not working

Get Help CSS
,
#1

Hi all,

I’ve got an issue with flexboxes and padding (might be related?). I’m currently doing the “Build a website design system” project, it’s open-ended so I’m not sure if a link is necessary, but here it is anyway.

I’ve got two issues. First, that one of my flexboxes is sticking out where it shouldn’t be (bottom of pic), and second, that I can’t seem to get the padding to work around the colour boxes (where the text is right up to the border). This is quite a frequent issue for me when I do my own practice projects, and although I always seem to bodge-job my way out of it, it would be good to know definitively where I’m going wrong with this, or what I’m missing.

(pls excuse how crude it is, I’m just practicing!)

image
image501×906 178 KB

HTML:

<!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">
    <script src="https://kit.fontawesome.com/929ced1c87.js" crossorigin="anonymous"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <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=Oswald:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>Website Guide</title>
</head>

<body>
  <div class = "wholething">
  <div class = "header-container">
    <h1>Website Title</h1>
    <h2> All the information and bio goes here.</h2>
    <h3>Font = Arial, Courier New</h3>
      <h3>Font sizes:</h3>
      <h4>H1 = 40px<br>
      H2= 30px<br>
      H3 = 20px<br>
      H4 = 15px<br>
          </div>
          
     <div class="fonts">     
    <div class = "font1">
      <p> Arial </p>
    <p><strong> The brown fox jumped over the moon</strong></p>
    <p> The brown fox jumped over the moon</p>
    <p><em> The brown fox jumped over the moon</em></p>
      </div>
  <div class = "font2">
    <p> Courier New </p>
    <p> The brown fox jumped over the moon</p>
    <p><strong> The brown fox jumped over the moon</strong></p>
    <p><em> The brown fox jumped over the moon</em></p>
      </div>
    </div>


    <div class= "colour-container">
 <!-- <div class="colours">-->
    <div class = "red">
      <p>Colour: red</p>
      </div>
       <div class = "blue">
         <p> Colour: blue</p>
      </div>
       <div class = "green">
         <p>Colour: green</p>
      </div>
   <!-- </div> -->  
 </div>
     </div>
   
  </body>
  </html>

CSS


  .wholething{
    align-items: center;
    align-content: center;  
    background-image: url("background/background1.png");
    padding: 10px 600px;

  }
  
  .header-container{
  
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: arial;     
    
  }
  
  .header-container h1{
    font-size: 40px;
    justify-content: center;
    
  }
  
  .header-container h2 {
    font-size: 30px;
     justify-content: center;
  }
  
  .header-container h3 {
  font-size: 20px;
  }
  
  .header-container h4{
    font-size: 15px;
  }
  
  .fonts{
      display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-shrink:0;
    font-family:Arial, Helvetica, sans-serif
  
  
  }
  
  .font1, .font2, .colour-container, .header-container {
   border: 5px solid black;
    padding: 5%; 
    background-color: rgba(235, 226, 226, 0.9);
    
  }
  
  .font2{
  font-family: 'Courier New', Courier, monospace;
  }

  .colour-container{
    width:100%;
    font-family:arial; 
    flex-basis: 21em;
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap:wrap;
    gap: 10px;

  
  }
  
    
  
  
  .red .green .blue {
    
    min-width: 100px;
    
    
  }
  
  .red .green .blue p {
    padding: 5px;
    margin: 5px;
    
  }
  
  
  .red{
    background-color: red;
  }
  
  .green {
    background-color: green;
  }
  
  .blue {
    background-color:lightblue;
  }
#2

Hi,
a horizontal padding of 600px is huge, I suppose that you put it that high because you wanted to see if it has an effect in the first place which it doesn’t?
Might be because your html is broken:
You have a nested h3 and a non closing h4.

#3

Hi - thanks for the reply

a horizontal padding of 600px is huge

I did that to make those flexboxes line up in the middle like they do (apart from the bottom one - which is what I’m trying to fix) is there a better way of doing it?

You have a nested h3 and a non closing h4.

Ooo thanks! Although I fixed it and it didn’t change anything

#4

Yes absolutely. Such a hack should be avoided as it causes further problems when you try to make your website responsive.
Flexboxes are centered vertically by adding align-items: center; and horizontally by adding justify-content: center;
See a flexbox guide here:

When you add such a huge padding it exceeds the available space when the viewport is very small as in your screenshot. You can probably scroll vertically then. So removing that padding might fix your issue.

If it doesn’t, that may be because your footer element exceeds the body. Then you can fix that by setting that to display: flex either and adding flex-wrap: wrap; which allows the elements to break if there’s not enough space.

#5

I did what you suggested, but now it lines up like this:

image
image1538×898 314 KB

What do I have to do to get all the boxes to be flush in the centre, with space around like the first screenshot? thank you!

#6

Wrap them all in a container. Set that container to have a max-width, margin: auto, display: flex. The flex items can have fixed widths: 100%, 50%, 50%, 100%.

#7

Ok - did that (thanks) but now I’m back to my original problem of the child divs going wider than the parent dive. I tried setting overflow to hidden but it didn’t do anything…
The div containing the fonts is where the boundary should be!

image
image1235×799 264 KB

Still also now sure how to put padding in the color boxes, I’ve done some more fiddling and nothing works

#8

Can you put a red border to your parent div and post a new screenshot of that and your new code?