Ember css dosen't work + How to create two stylsheets

I'm new to ember and I try bulid some application
So my first question was how to add css , I google it and I found this answer Where to add css and js files in ember-cli app?
So what I did is to create header.css file in app\styles
The CSS content is:

header {
     background-color: #0c2635;
     color: #a2a2a2;
     padding:30px;
 }
 header h1 {
     text-align:center;
     font-family: 'Indie Flower', cursive;
     font-size:60px;
 }
 nav#navbar {
     background-color:#dcdcdc;
     margin-bottom:25px;
 }
 nav#navbar ul {
     list-style-type: none;
 }
 nav#navbar ul li {
     display:inline-block;
 }

My application.hbs contain this HTML:

<header>
<h1>DrawYourGIF</h1>
</header>
<nav id="navbar">
<ul>
    <li>
        <a href="#">
            <i class="fa fa-picture-o" aria-hidden="true"></i>
            צפה בכל הגיפים
        </a>
    </li>
    <li class="pull-end">
        <a href="#">
            <i class="fa fa-user-plus" aria-hidden="true"></i>
            הרשמה
        </a>
    </li>
    <li class="pull-end">
        <a href="#">
            <i class="fa fa-user" aria-hidden="true"></i>
            התחברות
        </a>
    </li>
</ul>
</nav>

But the result that I get is that:

Nothing is work

Why is that? How can I make its work?

2) I want to bulid site for two languages

How can I make one css that will be used once when I need rtl and once that I need ltr?