SCSSに指定したborderが効かない

Question

最初はhtmlで見た目部分を作成していましたが、サーバーサイドに入るとhamlの方がやりやすいため、hamlに書き換えました。
htmlの時はborder効いていました。
gemに必要なコードを記述し、「rails haml:erb2haml」をして自動でhamlに変換しました。
今回やりたい内容はヘッダーの下にborderを当てたいです。

  %body
    %header
      .header
        %a.chatapp{:href => "#"} chatAPP
        %div
          = yield

.header {
  height: 68px;
  border-bottom: solid 2px red;
}

記述はこのようになってます。
ヘッダーの下にborderを当てたいのですが、scss自体に記述は問題ないか調べるために、全てにborderを当ててみました。
そしたら上右左はborderが当たるのに何故か下だけ当りません。。。
ちなみにhamlについては、どのビューにパスしても同じヘッダーにしたいため、appication.html.haml内に記述しています。

ご回答お願いします。

Answer 1

たぶん、これですと、
headerタグですべてを包んでしまっているので、
下記のようにするといかがでしょうか。

インデントで、%headerと= yieldを同じレベルにしてあげてください

  %body
    %header
      .header
        %a.chatapp{:href => "#"} chatAPP
        %div
    = yield

Comments

[yume0409]

素早い回答ありがとうございます。
お恥ずかしながらインデントのミスでした。。。
勝手にhamlにしてくれるコマンドはインデントも揃えてくれると思っていたので今後は気をつけたいと思います。

[kaori_oka]

インデントによってエラーが出て繊細ですが、
慣れてくると素早く書けるし見た目もきれいなので
ぜひぜひ頑張ってください～