--- id: 620175b3710a0951cfa86edf title: Step 42 challengeType: 0 dashedName: step-42 --- # --description-- The `calc()` function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element: ```css .example { margin: 10px; width: calc(100% - 20px); } ``` Ensure your years do not get hidden by setting a `z-index` of `999`. Then, give it a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`. # --hints-- Your `#years` selector should have a `z-index` property set to `999`. ```js assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index') === '999'); ``` Your `#years` selector should have a `margin` property set to `0 -2px`. ```js assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px'); ``` Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`. ```js const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding'); assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5rem 0px'].includes(padding)); ``` # --seed-- ## --seed-contents-- ```html Balance Sheet

AcmeWidgetCorp Balance Sheet

Assets
2019 2020 2021
Cash This is the cash we currently have on hand. $25 $30 $28
Checking Our primary transactional account. $54 $56 $53
Savings Funds set aside for emergencies. $500 $650 $728
Total Assets $579 $736 $809
Liabilities
2019 2020 2021
Loans The outstanding balance on our startup loan. $500 $250 $0
Expenses Annual anticipated expenses, such as payroll. $200 $300 $400
Credit The outstanding balance on our credit card. $50 $50 $75
Total Liabilities $750 $600 $475
Net Worth
2019 2020 2021
Total Net Worth $-171 $136 $334
``` ```css span[class~="sr-only"] { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); -webkit-clip-path: inset(50%); height: 1px; width: 1px; position: absolute; overflow: hidden; white-space: nowrap; padding: 0; margin: -1px; } html { box-sizing: border-box; } body { font-family: sans-serif; color: #0a0a23; } h1 { max-width: 37.25rem; margin: 0 auto; padding: 1.5rem 1.25rem; } h1 .flex { display: flex; flex-direction: column-reverse; gap: 1rem; } h1 .flex span:first-of-type { font-size: 0.7em; } h1 .flex span:last-of-type { font-size: 1.2em; } section { max-width: 40rem; margin: 0 auto; border: 2px solid #d0d0d5; } --fcc-editable-region-- #years { display: flex; justify-content: flex-end; position: sticky; top: 0; background: #0a0a23; color: #fff; } --fcc-editable-region-- ```