ログアウトボタンが下に移動しない

Question

###前提・実現したいこと
ログアウトボタンが下に移動しないです。

このログアウトボタンを３０px下に動かしたいです。

###発生している問題・エラーメッセージ
エラーは出ていません。

###該当のソースコード
HTMLに

<header class="clearfix">

        <ul>
            <form class="form-inline" name="logout" method="post" action="{% url 'logout' %}">
            {% csrf_token %}
                <div class="form-group">
                    <button type="submit" class="btn btn-primary" style="border-style:none;height:50%;font-size:15px;" id="logout">ログアウト</button>
                    <input name="next" type="hidden"/>
                </div>
            </form>
        </ul>

  </header>

CSSに

*{
    margin: 0;
    padding: 0;
}

header{
    height: 100px;
    background-color:gray;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

ul {
  display: flex;
}

と書きました。
###試したこと
fixboxを用いて移動させようとしましたが、全く動きませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
CSS3

Answer 1

初歩的なレイアウトの質問を繰り返されているので、老婆心ながら言わせてもらうと少し体系的に覚えたほうがいいです。
やさしいところを探しましたが、ここの第1章がいいのではないでしょうか？
https://developer.mozilla.org/ja/docs/Web/CSS/Getting_started

HTMLもおかしいので直しておいたほうがいいでしょう。

Answer 2

div.form-group{
	margin-top: 30px;
}

でいいのではないでしょうか！

Answer 3

単純に

margin-top:30px;

で下に動かせばよいのではないかと思います。