Landing page flexbox need help!

HTML-CSS
1

Tell us what’s happening:
Hi guys! i need help, I’m building the landing page project, but i cannot separate items in the flex box.
i put on my code in the parent tag display:flex, and then i worked on the child, i tried to put on both (parent and child) justify content: space-around, but for some reason it doesnt work! can someone please help me?

Your code so far

PS5 Spec

  1. CPU: AMD Zen 2-based CPU with 8 cores at 3.5GHz
  2. GPU: 10.28 TFLOPs, 36 CUs at 2.23GHz
  3. Memory interface: 16GB GDDR6 / 256-bit
  4. Optical drive: 4K UHD Blu-ray drive
Select

PS5 key facts

      <li>The PS5 price is undefined</li>
  <li>Sony has confirmed the PS5 release date is not currently delayed by coronavirus</li>
  <li> The Sony PS5 is the next-gen PlayStation console, replacing the PS4 Slim and PS4 Pro</li>
  <li>The DualSense PS5 controller has given us a fairly good idea of what we can expect</li>
  </ol>
<button class="btn2">Select</button>
#details { display:flex; width: 50%; text-align:center; align-items:center; justify-content: space-around; } #first-table { border: 2px solid; flex:1; } #second-table{ border: 2px solid; flex:1; }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

2

Can you post a full code please?

3

this is my link
https://codepen.io/RickyLeaks/pen/oNjdKVP

the flex box that im talking about is at the end of the page

im pretty sure that the problem is with the parenting, but still i cant figure out where the problem is

4

I think I’ve found a solution.
It looks like the divs tend to absorb as much space as possible so when they are next to each other, no space is left around them so justify-content won’t have any space to put around or between them.

In your code, you need to set width to your divs in order to limit how much space they are going to occupy with max-width

Put this in your code and see how it looks:

#first-table {
  border: 2px solid;
  flex:1;
 max-width: 40%;
}

#second-table{
  border: 2px solid;
   flex:1;
  max-width: 40%;
}
5

thank you so much it worked! now there’s some space between the divs.

1 Like
6