2022-04-13 14:42:58 +00:00
---
id: 6140883f74224508174794c0
title: Step 10
challengeType: 0
dashedName: step-10
---
# --description--
2022-05-30 16:25:46 +00:00
Fai in modo che l'elemento `header` occupi tutta la larghezza del suo elemento genitore, imposta la sua proprietà `height` a `50px` e il `background-color` a `#1b1b32` . A questo punto imposta la proprietà `display` in modo da usare _Flexbox_ .
2022-04-13 14:42:58 +00:00
# --hints--
Dovresti usare il selettore di elemento `h1` .
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('header'));
```
2022-05-30 16:25:46 +00:00
Dovresti dare al selettore `header` una proprietà `width` del `100%` .
2022-04-13 14:42:58 +00:00
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%');
```
2022-05-30 16:25:46 +00:00
Dovresti dare al selettore `header` una proprietà `height` di `50px` .
2022-04-13 14:42:58 +00:00
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px');
```
2022-05-30 16:25:46 +00:00
Dovresti dare al selettore `header` una proprietà `background-color` di `#1b1b32` .
2022-04-13 14:42:58 +00:00
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)');
```
2022-05-30 16:25:46 +00:00
Dovresti dare al selettore `header` una proprietà `display` con il valore `flex` .
2022-04-13 14:42:58 +00:00
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.display, 'flex');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< meta name = "description" content = "freeCodeCamp Accessibility Quiz practice project" / >
< title > Accessibility Quiz< / title >
< link rel = "stylesheet" href = "styles.css" / >
< / head >
< body >
< header >
< img id = "logo" src = "https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" >
< h1 > HTML/CSS Quiz< / h1 >
< nav > < / nav >
< / header >
< main > < / main >
< / body >
< / html >
```
```css
body {
2022-09-20 14:44:39 +00:00
background: #f5f6f7 ;
color: #1b1b32 ;
font-family: Helvetica;
margin: 0;
2022-04-13 14:42:58 +00:00
}
--fcc-editable-region--
--fcc-editable-region--
#logo {
width: max(100px, 18vw);
2022-09-20 14:44:39 +00:00
background-color: #0a0a23 ;
2022-04-13 14:42:58 +00:00
aspect-ratio: 35 / 4;
2022-09-20 14:44:39 +00:00
padding: 0.4rem;
2022-04-13 14:42:58 +00:00
}
```
