Why Isn’t align-items and My CSS Variable Working on CodePen?

HTML-CSS
1

Hello! The align-items element is not working on code-pen. Also the css variable is also not working. Like I defined the background color in :root but it is not working and the box got disappear like it do not have any color.

Could you help me figure out if I’m doing something wrong, or if there’s an issue with CodePen?

Here is the link:

2 
:root {
  --background-color: brown;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /*background-color: #ADD8E6;*/
}

.head {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.head-right {
  width: 150px;
  height: 150px;
  background-color: var(--head-color);
}

.head-left {
  width: 150px;
  height: 150px;
  background-color: brown;
}

Hi there!

You have created a variable --background-color with the value brown in your root selector. Now if you need to use that color brown for an element, you need to add that variable --background-color using var() function as a value of background-color property to the required element’s selector.
Try to add the variable correctly and your preview will appear correctly align.

1 Like
3

Yeah, I tried it and It worked. Thank you. Also do you know how I center it vertically like align-items properly is not working.

1 Like
4

Your welcome.

You can center it vertically by giving a margin top value.

1 Like