창을 축소시키면 오른쪽에 공백이 생깁니다.

Question

포트폴리오 페이지를 만들고 있는데 섹션 부분을 만들고 난 뒤 창을 축소시키면 영상에서 보시다시피 공백이 생깁니다. 이미지와 텍스트도 창의 크기에 맞게 조절이 되는 것이 아니라 위치가 고정되어 있고요. 어떻게 해결하면 좋을까요? 이석범 포트폴리오

안녕하세요, 저는 '이석범'이라고 합니다

저는 웹퍼블리셔를 지망하고 있습니다

부족한 점이 많지만 최선을 다해 만들었으니 열심히 들러봐주세요!

profile

이름 : 이석범
생년월일 : 1990. 04. 08
최종학력: 대구대학교 사회학과 (2019년 6월 졸업)
전화번호 : 010-2108-5202
e-mail : iks2959@naver.com

body{ margin:0; padding:0; font-family: 'Source Sans Pro', sans-serif; } a { text-decoration: none; color:white; } header{ width:100%; } .navbar{ display:flex; justify-content: space-between; align-items: center; padding:18px 12px; height:100px; background-color:rgb(172, 161, 163); } .navbar .nav_logo img{ width:110px; } .nav_menu { display:flex; list-style:none; padding-left:0px; } .nav_menu li{ padding:8px 12px; margin-top:10px; } a:hover{ color: #D14E63; transition: 0.2s ease-in; } .nav_sns i{ font-size:20px; color:white; padding:5px 05px; margin-top:08px; } .navbar_togleBtn{ display:none; } .slide-container { width: 300vw; transition: all 1s; margin:0; padding:0; } .slide-box { width: 100vw; float: left; background-size: cover; position: relative; } .slide-box img { width: 100%; } .text { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size:5rem; z-index: 1; font-size:40px } .left{ position:absolute; top:50%; left:15%; transform: translate(-50%, -50%); z-index: 1; font-size:30px; } .right{ position:absolute; top:50%; right:15%; transform: translate(-50%, -50%); z-index: 1; font-size: 30px; } .hope{ color:rgb(230, 116, 116); } .export{ color: green; } section{ display: flex; flex-direction: column; width:100%; height:650px; background-color: bisque; } .profile{ color: #585b60; font-family: "Montserrat", sans-serif; font-size: 40px; font-weight: 700; letter-spacing: 1px; line-height: 1; margin-top: 40px; margin-left:500px; width:150px; padding: 0 10px; height:120px; } .main { position:relative; display: flex; flex-direction: row; } #slide { position:absolute; width:100%; height:400px; margin-top: 0px; overflow:hidden; } #slide img{ border: 8px solid #fff; box-shadow: 0px 0px 30px rgb(0 0 0 / 20%); border-radius: 50px; margin-left:200px; } #slide > div { top:0; left:0; width:100%; height:100%; margin-left: 300px; } .pro{ position:absolute; margin-top:40px; margin-left:300px; width:300px; left:600px; } .pro ul li{ color: #444; font-size: 20px; font-weight: 600; line-height: 20px; letter-spacing: 0px; padding: 20px 0; } .sobu{ margin-top:30px; } .sinobe img{ width: 300px; height: 400px; } .tiboli img{ width:300px; height:400px; } .mirror img{ width:300px; height: 400px; } .paperflower img{ width: 300px; height: 400px; } .jeonju img{ width: 400px; height:300px; margin-top: 50px; }

인성 절구로 빻음 · Answer

이미지가 없어서 확실하게 보지는 못했습니다만...margin-left 값이 px로 고정되어있네요해당 부분때문에 이미지가 옮겨지지않아요

인성 절구로 빻음 · Answer

퍼블리싱하실때 팁 하나 드리자면윈도우 기준 크롬브라우저에서 ctrl &#43; shift&#43;c 누르시면 element 선택 할 수 있고 그 element에 어떤 css가 적용되어있는지 확인하실 수 있습니다.

창을 축소시키면 오른쪽에 공백이 생깁니다.

2개의 답변

#section 목록