Я округлил свои кнопки с помощью CSS, и теперь они каскадно

Не используйте id (#), используйте классы следующим образом:

.header {
  color:white;
  text-align:center;
  background-color:#5C0DAC;
  font-family:Arial, Sans-Serif;
  font-size:30px;
  padding:0px;
  margin-bottom:10px;
  height:38px;
  width:800px;
  border:2px solid;
  border-radius:25px;
  display: inline-block;
}

И используйте display: inline-block.

<div class="header">
       Leon CS150 Assignment
</div>
<div class="header">
       Leon CS150 Assignment 2
</div>

Обновить:

После прочтения вашего комментария причина, по которой ваши объекты являются вертикальными, а не горизонтальными, состоит в том, что для элемента, содержащего вашу навигацию, требуется один из этих двух тегов:

• display: inline;
• display: inline-block;

Эти два элемента заставляют элементы оставаться на одной линии, а не постоянно переходить на новую строку. Подумайте о кукле-гнезде, каждая кукла - это однослойное глубокое погружение дальше и дальше в куклу. То же самое относится к html, поэтому для того, чтобы противодействовать тому, что падение линии на элемент вы изменяете размеры, поплавок или отображение, чтобы удовлетворить дизайн цели.

Я все еще не совсем уверен, что вы пытаетесь создать или сделать. Является ли это более сложным, что вы пытаетесь выполнить? скрипка

Когда вы смотрите на код, это не так уж сильно отличается от вашего. Одно из главных отличий заключается в том, что nav - это просто div но он привязывается к родительскому элементу. В этом случае header. Поэтому я определяю этот элемент как position: absolute; что позволит более точно контролировать всю структуру меню.

Затем для большого меню и рефакторинга иногда лучше использовать div над традиционной ul или plain a href. Это добавит более высокий уровень контроля еще раз над структурой вашего меню.

Также вы заметите, что я не использую Id. Это потому, что Id разрешен только на одной странице, он уникален. Это означает, что его нельзя использовать более одного раза. class может быть, что является более встроенным для повторяющихся значений на всей странице.

Я все еще не совсем уверен в вашей цели и плохой формулировке вопроса, но, надеюсь, это указывает на правильное направление:

header {
    width: 100%;
    height: 100px;

    background: #5C0DAC;
}

h3 {
    font-family: Arial, Sans-Serif;
    color: white;
    text-align: center;
}

nav {
    width: 100%;
    height: 10%;

    position: absolute;
    left: 85px;
}

.Menu-Item {
    width: 100px;
    height: 30px;

    padding: 10px 35px;
    border-radius: 25px;

    display: inline;
    margin: 0px 15px;
    box-shadow: 0px 3px 6px 0px;
    position: relative;
}

a {
    font-family: Arial, Sans-Serif;
    text-align: center;  
    line-height: 28px;
    color: white;
}

html:

<header>
    <h3>Leon CS150 Assignment</h3>
    <nav>
        <div class="Menu-Item">
            <a href="#">Home</a>
        </div>

        <div class="Menu-Item">
            <a href="#">About</a>
        </div>

        <div class="Menu-Item">
            <a href="#">CV</a>
        </div>

        <div class="Menu-Item">
            <a href="#">Wordpress</a>
        </div>

        <div class="Menu-Item">
            <a href="#">Webshop</a>
        </div>
    </nav>
</header>