반응형 헤더 네비게이션(3) 질문

안녕하세요.

수업을 듣다가 궁금한게 있어서 글을 남기게 되었습니다.

1. CSS에서 nav에 width를 1280px;로 잡을 경우 아래와 같이 나오고 있습니다.

<1280px>

그래서 저는 1100px로 잡아서 선생님께서 만드신 화면과 비슷하게끔 만들었는데 선생님이 만드신 거와 다르다보니 뭐가 잘못된 건지 궁금합니다. 현재 노트북으로 작성하고 있습니다.

<1100px>

2. 미디어 쿼리 부분에서 .gnb li가 가로방향 전체가 아닌 .gnb li a 주변에 border가 만들어지는데 뭐가 잘못된건지 봐주시면 감사하겠습니다.

아래는 코드 입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex UI 실전 제작 - 반응형 헤더 네비게이션</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');
        @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
        body{
            font-family: 'Montserrat', sans-serif;
            background-color: eee;
            font-size: 15px;
            color: #222;
            margin : 0;
        }
        /* reset css */
        a {
            text-decoration: none;
            color: #222;
        }
        h1, h2, h3, h4, h5, h6 {
            font-weight: normal;
            margin: 0;
        }
        button {
            cursor :pointer;
            outline : none;
        }
        /* Header */
        header {
            background-color: #74b9ff;
            display: flex;
            justify-content: center;
            height: 60px;
            align-items: center;
        }
        nav {
            display: flex;
            justify-content: space-between;
            width: 1100px;
        }
        .logo {}
        .logo img{
            filter:invert()
        }
        .gnb {
            margin: 0;
            padding : 0;
            list-style: none;
            display: flex;
        }
        .gnb li{}
        .gnb li a {
            color: white;
            margin: 10px;
    
        }
        .sns {}
        .sns a {
            color: white;
            margin: 5px;
        }
        .gnb li a:hover, .sns a:hover{
            color: black;
        }
        @media screen and (max-width: 768px){
            header{
                height: auto;
                
            }
            nav {
                width: 100%;
                display: flex;
                flex-direction: column;
            }
            .logo {
                padding: 10px;
            }
            .gnb {
                display: flex;
                flex-direction: column;
                align-items: center;
                
            }
            .gnb li {
                border: 1px solid white;
                
                
            }
            .gnb li a {
                border: 1px solid #000;
                display: block;
                padding: 7px;
                margin: 0;
            }
         .sns {
             
             text-align: center;
             background-color: dodgerblue;
             padding: 10px;
         }
         .sns a {
             color: black;
         }

        }
    </style>
</head>
<body>
    
    <header>
        <nav>
            <div class="logo"><a href="#none"><img src="Flex UI 실전 제작(3) – 반응형 헤더 네비게이션/images/logo.png" alt=""></a></div>
            <ul class="gnb">
                <li><a href="#none">Home</a></li>
                <li><a href="#none">About</a></li>
                <li><a href="#none">Project</a></li>
                <li><a href="#none">Plan & History</a></li>
                <li><a href="#none">Awards</a></li>
                <li><a href="#none">Location</a></li>
                <li><a href="#none">Contract</a></li>
            </ul>
            <div class="sns">
                <a href="#none"><i class="fa fa-facebook-square"></i></a>
                <a href="#none"><i class="fa fa-twitter-square"></i></a>
                <a href="#none"><i class="fa fa-youtube-play"></i></a>
            </div>
        </nav>
    </header>
</body>
</html>

인프런 커뮤니티 질문&답변