<https://codepen.io/evie4411/pen/geWzNM>

I would like to have control of how wide my text is.
And both < hr > elements, I would like to extend and retract depending on the width of the text within them.

Right now, the text spreads right across the screen and I would like it to fit within the width of the menu... but I would need flexibility when I work on other elements of my site.

Below, is the css for the whole screen element an it has worked for me well so far across all pages, and i would love if this could stay the same- I am scared of my site looking like a bundle of margins and borders- please see the code pen for the rest

```
.outer {
  min-height: 100vh;
  position: relative;
  z-index: 2;
  overflow: hidden;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

```

Many Thanks!!