Solution 1 :

Please change your li class=”home” to li.home you should use dot(.) in class not word class.

li.home {
  text-align: left;
}

Solution 2 :

You can do like this.

html

<div>
  <ul>
    <li class="home">Home</li>
    <li>Shop</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
  <h1>Company</h1>
</div>

css

ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: right;
}

li class="home" {
  text-align: left;
}

li {
  display: inline-block;
  margin: 10px;
}

h1 {
  margin: 0;  
}

div {
  display: flex
}

if you wanna show logo on the left side, use html like this.

<div>
  <h1>Company</h1>
  <ul>
    <li class="home">Home</li>
    <li>Shop</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>

and if you wanna show logo on left side and menu on right side use this in div

div {
  display: flex;
  justify-content: space-between;
}

let me know if you have any issue.

Solution 3 :

test it:

 ul {
            display: inline;
        }

        li.home {
            text-align: left;
        }

        li {
            display: inline-block;
            margin: 10px;
        }
        h1.header{
            display: inline;
        }
<ul>
    <li class="home">Home</li>
    <li>Shop</li>
    <li>About</li>
    <li>Contact</li>
</ul>
<h1 class="header">Company</h1>

Solution 4 :

Just use float for align elements , https://jsfiddle.net/pc4kayrx/

<header>
<ul>
    <li class="home">Home</li>
    <li>Shop</li>
    <li>About</li>
    <li>Contact</li>    
</ul>
<h1>Company</h1>
</header>

<style>
ul {
float:right;
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: right;
}


li {
display: inline-block;
margin: 10px;
}
</style>

Problem :

I have a ul for website navigation and a header, I want them next to each other but one is on top. I tried making home a specific class and to align it right but I couldn’t get it to work.

ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: right;
}

li class="home" {
  text-align: left;
}

li {
  display: inline-block;
  margin: 10px;
}
<ul>
  <li class="home">Home</li>
  <li>Shop</li>
  <li>About</li>
  <li>Contact</li>
</ul>
<h1>Company</h1>

The li class="home" was my attempt to align it left
I want the company to be next to the ul, but aligned left

I have searched different options on Google, but none seem to work. How can i resolve my issue?

By