CSSのヘッダーの整列

Question

私のヘッダーに問題があります。つまり、navタグはロゴの下にあり、どのように調整するのかわかりません。私はパディングでナビを調整しようとしましたが、これは最終的には機能しませんでした。

は、ここに私のGitHubへのリンクです：https://github.com/monixm/capstone

CSS：

html body { 
     font-family: 'Work Sans', sans-serif; 
     color: DimGrey; 
     margin: 0; 
     padding: 0 24px; 
     width: auto; 
    } 

    /* 
    header { 
     height: 64px; 
     margin: 10px 24px 10px 24px; 
     } 
    */ 

    nav { 
     text-align: right; 
    } 

    nav li { 
     justify-content: space-between; 
     align-items: center; 
     margin: 0 16px 0 0; 
     list-style: none; 
     display: inline-block; 
    } 

    p { 
     font-size: 14px; 
     padding: 8px 0; 
    } 

    .name1, .name2 { 
     font-size: 32px; 
     display: flex; 
     text-align: center; 
     font-weight: lighter; 
    } 

    .name1 { 
     color: DarkGrey; 
    } 

    .logo { 
     display: flex; 
     text-align: center; 
     margin: 0; 
    } 

    .imglogo { 
     height: 50px; 
     margin-top: 20px; 
    } 

私が間違っているのものを教えてください。

Answer 1

あなたのCSSに以下のこのスタイルを追加します。

header{ 
display: flex; 
align-items: center; 
justify-content: space-between; 
}