---
id: 61487da611a65307e78d2c20
title: Step 49
challengeType: 0
dashedName: step-49
---
# --description--
On small screens, the unordered list in the navigation bar overflows the right side of the screen.
Fix this by using _Flexbox_ to wrap the `ul` content. Then, set the following CSS properties to correctly align the text:
```css
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
```
# --hints--
You should give the `ul` a `flex-wrap` of `wrap`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.flexWrap, 'wrap');
```
You should give the `ul` an `align-items` of `center`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.alignItems, 'center');
```
You should give the `ul` a `padding-inline-start` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.paddingInlineStart, '0px');
```
You should give the `ul` a `margin-block` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.marginBlock, '0px');
```
You should give the `ul` a `height` of `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%');
```
# --seed--
## --seed-contents--
```html
Accessibility Quiz
