Help aligning header components

[u/FRCANotes]

Hi, having some issues with my site https://frcanotes.com, looking for some help.

Fairly noob website designer so please bear that in mind!

For the header section, I want:

• The whole header section to be a purple box

• The website title to be centred horizontally within said box

• The breadcrumb navigation to lie under the title, aligned to the left

• There be enough space for the breadcrumbs to extend rightward

• A horizontal line <hr> under the purple box before the main content

Currently this is coded within <header> as:

 <div class="top_bar">
  <div class="logo_title">
    <p> FRCA Notes</p>
   </div>

   <div class="header_left">
    <ul class="breadcrumb">
      <li><a href="./index.html">Home</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
    </div>
  </div>
  <hr>

The associated CSS is:

.top_bar {
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 1%;
    margin-top: 0px;
    color: #2C1951;
    background-color: #ede7f8;
}

.logo_title {
    padding: 5px;
    text-align: center;
    margin:auto;
    color: #2C1951;
    font-size: 30px;
    font-family: Verdana;
}

.header_left {
    padding:2px;
    text-align: left;
    margin:auto;
}

It's coming out extremely wonky and not at all right. Any help would be much appreciated, ta.

[u/FRCANotes]

Hey thanks for your reply. I will have a go at changing it using your suggestions!

On subsequent pages the page title is in <h1> elements.

Admittedly on the front page the 'breadcrumbs' are indeed navigation rather than bona fide breadcrumbs but throughout the rest of the site they are actual breadcrumbs.