Question about setting sizes etc

Tell us what’s happening:
Describe your issue in detail here.

Hi there, to be honest, I don’t exactly have an issue, but I was just wondering - how are you choosing these figures for size?

Like you are saying 500px or 2em, or 0.5rem, etc etc etc - are these figures just trial and error? Or are they generic ones that are usually about right? Or they only work this this tutorial, and you have already gone through trial and error?

I’m only asking, because at the moment, I am blindly following what you are asking me to write, which is fine, but in the last project, or when I am doing things on my own, I am just copying them, or I am having trouble adjusting things when they are slightly out…

I hope this makes sense - because I am new, I am not 100% sure what I am asking myself, but I guess the long and short of it is:

Is there a special rule to come to these figures, or is it just trial and error which will become second nature when I have got a bit more practice under my belt?

Your code so far

/* file: styles.css */

/* User Editable Region */



/* User Editable Region */


<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="canvas">
    </div>
  </body>
</html>

Your browser information:

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

Challenge: Learn the CSS Box Model by Building a Rothko Painting - Step 8

Link to the challenge:

hi there,
there are a lot of units, related to or not.But nevertheless to think about positioning is not only pixels. Did you know the fractional unit?
here is something to read, about grids and positioning i found interesting:

hi there,
the resolutions of the devices used ,are also the maximum viewport that could be chosen. found a list of some common sizes here: