---
id: 61487da611a65307e78d2c20
title: Step 50
challengeType: 0
dashedName: step-50
---
# --description--
Em telas pequenas, a lista não ordenada na barra de navegação transborda do lado direito da tela.
Corrija isso usando o _Flexbox_ para encapsular o conteúdo do `ul`. Em seguida, defina as seguintes propriedades CSS para alinhar corretamente o texto:
```css
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
```
# --hints--
Você deve dar ao `ul` um `flex-wrap` de `wrap`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.flexWrap, 'wrap');
```
Você deve dar ao `ul` um `align-items` de `center`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.alignItems, 'center');
```
Você deve dar ao `ul` um `padding-inline-start` de `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.paddingInlineStart, '0px');
```
Você deve dar ao `ul` uma `margin-block` de `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.marginBlock, '0px');
```
Você deve dar ao `ul` uma `height` de `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%');
```
# --seed--
## --seed-contents--
```html
Accessibility Quiz
