left: calc() 적용 안됨

커뮤니티

포인트

로딩중

쿠폰

내 강의실

국비 신청 내역

수강권

증명서

숙제 피드백

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

left: calc() 적용 안됨

[스파르톤] HTML, CSS 시작하기

2주차

이*형

・

추천

・

조회수

답변 완료

left: calc(50% - 600px )코드 적용이 안되는것 같아요 어떤게 문제일까요?

보고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 상황을 이해할 수 있어요.

영상과 제 페이지의 비교

<!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>띵동코딩- 클론코딩</title><style>
        .gnb{
         
            display: flex;
            flex-direction: row;/* row */justify-content: space-between;
            align-items: center;


            width: 1120px;
            margin:auto;


            height: 60px;
            


        }
        .main{
         
            display: flex;
            flex-direction: column;/* row */justify-content: space-between;
            align-items: center;
            padding-top: 60px;
        }
        .main > h3{
            font-size: 500;
            line-height: 1.5;
            text-align: center;
            color: #415b6d;


            margin-bottom: 10px;



        }
        .main > h1{
            font-size: 46px;
            font-weight: 800;
            line-height: 1.4;
            text-align: center;
            color: #26343d;



        }
        .main > img{
            width: 1300px;
        }
        hr{
            border-top: none;
            border-bottom: 0.5px solid lightgray;
        }
        .cta{
            background-color: green;


            width: 1200px;
            height: 80px;
            border-radius: 8px;


            display: flex;
            flex-direction: row;/* row */justify-content: space-between;
            align-items: center;


            position: fixed;
            bottom: 10px;


            left: calc(50% - 600px);


        }
    </style>
</head>
<body><div class="gnb"> 
        <img src="https://ddingdong.spartacodingclub.kr/images/common/logo-tb.svg"><span> 로그인</span></div><hr/><div><div class="main"><h3>매주 월요일, 내 강의실에 찾아오는<br/>
                온라인 코딩 학습지
            </h3><h1> 띵동코딩이 도착했어요</h1><img src="https://media-sparta.s3.ap-northeast-2.amazonaws.com/media/images/hero.png"></div></div><div class="cta"><p>
            첫 달 만원 혜택 연장, 선착순 100명 한정!
        </p><button>만원으로 시작하기</button>


    </div>
</body>
</html>

댓글 알림