Colmar Academy

What do I do wrong. ? COLMAR ACADEMY. Why the ‘nav_bar’ is not in the same line as ‘logo’???

<div id="navigation">

        <img class="logo" src=".\Sources\ic-logo.svg" width="48" height="50" />

        <p1>Colmar</p1>

        <p1>Academy</p1>

        <ul class="nav_bar active">

            <div class="bar_item">

                <li><a style="font-weight: 500;">On campus</a></li>

            </div>

            <div class="bar_item">

                <li><a>Online</a></li>

            </div>

            <div class="bar_item">

                <li><a>or companies</a></li>

            </div>

            <div class="bar_item">

                <li><a>Sign in</a></li>

            </div>

        </ul>

    </div>

Css

/* LOGO + MENU */

#navigation {

  display: inline-block;

  justify-self: baseline;

  font-family:Arial, Helvetica, sans-serif;

  width: 100%;

  height: 4rem;

  margin: 24px;

  border: 1px solid red;

  margin-top: 1rem;

  }

img .logo {

  float: left;

  width: 10rem;

  margin-left: 1rem;

  font-size: 1.5rem;

  }

#navigation >.nav_bar {

  float: auto;

  width: 42rem;

  height: 4rem;

  font-size: larg;

  margin-left: 41rem;

  list-style-type: none;

}

.bar_item {

  display: inline-block;

  padding: 1rem;
}

I sort it out. I need to write into the #navigation >. nav_bar this margin margin: -3rem 2rem 0 53rem; then I get it on the right place. I hope it is not breaking the coding law.