What are the functions in this CSS doing exactly?

1

Hello :slight_smile: First post, so I’m sorry if these sorts of topics are prohibited. I’m currently working on the Tribute Site part of FCC, and I had a specific idea in mind, and so I’ve been trying to figure out how to achieve that by scouring the internet. I found a pen project (a blog site) that had a layout similar to what I wanted to achieve, but the CSS it uses is currently out of my understanding and I really want to know what’s going on in each line?:

#text-container {    
  width: calc((3*90vw)/5);
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  overflow: hidden;
  z-index: 2;
  position: relative;
  background: white;
  border-left: 3px solid #7B6938;
  border-right: 3px solid #7B6938;
  padding-right: 3rem;
}

If someone could provide a breakdown for me that would be very appreciated :slight_smile: Thanks.

3

Thanks :slight_smile:
I wanted the site to have empty space (padding, I think is the right word) to either side. With a heading and subheading in the centre top, an image to the left that lines up with the heading and the text+bullet points to the right of the image.

Here is my codepen so far:

EDIT: Interesting, in the embedded pen the site appears incorrect to how I see it in my browser, where it more resembles what I actually am going for. Is this because of the container-fluid div?