The last line there, width: 100%;, is what makes the navigation bar stretch across the full width of the page. To shorten it, you can put in a different percentage or a specific number of pixels. You’ll also need to add a margin so the shorter navigation bar is centered on the page.
To add custom CSS, go to your My Sites page and click the Customize link under the blog’s title. In the Customizer, open the CSS section and in the CSS editor there, you can add your custom CSS. I’d recommend trying out something like this: