ヘッダーぽいものを作る #CSS

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SiteName</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div class="header">
      <div class="header-logo">SiteName</div>
      <ul>
        <li>何を勉強すべきか</li>
        <li>HTML何もわからん人へ</li>
        <li>CSSも何もわからん人へ</li>
      </ul>
    </div>
  </body>
</html>

@charset "UTF-8";

.header {
  width: 100%;
  height: 90px;
  background-color: #00FF00;
  color: #fff;
}

.header-logo {
 font-size: 36px;
 float: left;
 padding: 20px 40px;
}

.header li{
 float: left;
 padding: 33px 20px;
 list-style: none;
}

できたもの

こちらを参考にさせていただきました。
Progate