レスポンシブしたいのですがこのコードでできないですけど何が間違っているのでしょうか？

Question

レスポンシブしたいのですがこのコードできないですけど何が間違っているのでしょうか？

今webページを制作していてレスポンシブしようとおもい。お手本をみながらコードをうっていたのですがお手本と同じはずなのになぜかできない。

発生している問題・エラーメッセージ

レルポンシブできない

該当のソースコード

<nav class="top-nav">
      <ul id="menu">
        <li class="hamburger"><a href="menu"><i class="fa fa-bars"></i></a></li>
        <li><a href="#">会社名</a></li>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">事業案内</a></li>
        <li><a href="#">採用情報</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>

nav{
  background-color: #FAF0E6;
  color: black;
}

nav ul{
  display: flex;
  flex-float: row;
  margin: 0;
  padding: 6px;
  list-style-type: none;
}

nav li.hamburger{
  align-self: flex-end;
}

nav a{
  display: block;
  border-radius: 4px;
  padding: 12px 24px;
  color: black;
  text-decoration: none;
}

nav li a:hover{
  background-image: url(img/logo1.jpg);
}

@media only screen and(min-width:550px){
  nav ul{
    display: flex;
    flex-flow: row;
    margin: 0;
    padding: 6px;
    list-style-type: none;
  }
  nav li.hamburger{
    display: none;
  }
}

###こうしたい

###現在

試したこと

お手本をコピーしてはってみたらできました

Comments

[gogoweb_ikeda]

nav ulのスタイルが通常時も550px以上の時も同じに見えますがこれは正しいですか？

[退会済みユーザー]

すみません。。そこが間違いでしたありがとうございます

Answer 1

nav ul{
  display: flex;
  /*flex-float: row; ← ここが問題 */
  margin: 0;
  padding: 6px;
  list-style-type: none;
}

Comments

[kei344]

あ、解決してた。

[退会済みユーザー]

すみません^^;誤字でした。

Answer 2

cssの方に誤字がありました。
直し↓

nav{
  background-color: #FAF0E6;
  color: black;
}

nav ul{
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 6px;
  list-style-type: none;
}

nav li.hamburger{
  align-self: flex-end;
}

nav a{
  display: block;
  border-radius: 4px;
  padding: 12px 24px;
  color: black;
  text-decoration: none;
}

nav li a:hover{
  background-image: url(img/logo1.jpg);
}

@media only screen and (min-width: 550px){
  nav ul{
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 6px;
    list-style-type: none;
  }
  nav li.hamburger{
    display: none;
  }
}