“Build a Website Design System”

Hi together,

in the project “Build a Website Design System” I am getting stucked at one point.
I have too much white space between the yellow box and the border, like in the following image.

2021_03_18_11_48_45_Mein_Styleguide|690x87

How to solve this problem? I want the boxes to fullfill the color-palette.

body {
    font-family: arial;
}

div {
  display: block; 
 
}

h1 {
    color: black;
    margin: 10px;
}
.color-palette{
    display: inline-block;
    box-sizing: border-box;
    width: auto;

}

.container {
    margin: 10px;
    padding:10px;
    border: 3px solid black;
}

.colors {
    width: 100%;
    height: 20%;
}

p .color{
    margin: 20px;
    height: 20px;
    width: 100%;
}

.blue {
    color: white;
    background-color: rgb(25, 78, 128);;
    padding:30px;
    margin: 5px;
    position: relative;
    width: 150px;


}

.green {
    color: white;
    background-color: rgb(101, 163, 127);
    padding:30px;
    margin: 5px;
    position: relative;
    width: 150px;

}

.red {
    color: white;
    background-color: rgb(199, 50, 34);
    padding:30px;
    margin: 5px;
    position: relative;
    width: 150px;

}

.yellow {
    color: black;
    background-color: rgb(214, 207, 73);
    padding:30px;
    margin: 5px;
    position: relative;
    width: 150px;
}
<!DOCTYPE html>
<html>
<head>
    <title>Mein Styleguide</title>
    <link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
    <h1>Mein Styleguide</h1>
<div class="container">
    <div class=color-palette>
        <p class="blue">class: blue<br><br>rgb: 25, 78, 128</p></div>
    <div class=color-palette>
    <p class="green">class: green<br><br>rgb: 101, 163, 127</p></div>
    <div class=color-palette>
    <p class="red">class: red<br><br>rgb: 199, 50, 34</p></div>
    <div class=color-palette>
    <p class="yellow">class: yellow<br><br>rgb: 214, 207, 73</p></div>
</div>
</body>
</html>

Hi @method1540566758
your color boxes (the <p> tags) have a fix width of 150px each. Their parent elements have no with, so they will be as wide as their children. You’d have to put the background color to the parent elements .color-palette and give them a relative width width %. But with inline-block elements, that will still be buggy. Did you have a look at flex boxes or the box system yet?

Hi Mirja,

thanks for your reply! You say "put the background color to the parent elements .color-palette".
But “.color-palette” is a div. So I would need 4 of these divs with different names and background colours while my color-selectors “.blue”, “.red” etc. become obsolete?

You already have four divs named .color-palette. You just need to add a class with the color name. In that class, you just have the background-color. But you’ll never reach the desired effect to 100% with inline-block elements. It’s not a good practice to use them for layout purposes. You’ll witness odd behaviour, even if you give them a percentual width instead of a fix width.

Oh, you´re right - I still have these divs. :sweat_smile:

I´ve changed it as you said and it´s working well. Thank you very much!:wink: