답변 드리겠습니다.

해당하는 현상의 원인은 초기 레이아웃을 설계할때

스타일 시트를 포지션 값만으로 설정이 된 부분입니다.

정상 현상이 맞습니다.

브라우저 창을 줄일때 정상적인 범주 안에서 줄어 들게 할려면

해당 레이아웃의 css 속성을 약갇 바꿔 주셔야 됩니다.

개발자 도구를 열어 엘리먼트의 요소를 찾아 보면

예)

<section class="sec1"></section>

이라는 엘리먼의를 찾으실수 있을껍니다.

이해당하는 스타일의 속성을 보시면

텍스트의 영역과 이미지의 영역으로 나뉘어져 있는것을 확인 할 수 있습니다.

<div class="typo"> 의 속성을 보면 left:90px; top:145px; 의 포지션 값으로만 설정되어있는데요

<figure> 의 이미지 엘리먼트도 마찬가지 

이 두개의 엘리먼트의 요소를 왼쪽 정렬의 속성을 주고(float:left;)

엘리먼트의 넓이를 %단위로 가져가면 브라우져 크리에 비례하여 침범하지 않고 줄어 들어 갈 것 같습니다.

sec1 .typo{float:left; width:40%; padding:145px 0 0 90px;}

figure{float:left; width:43%; margin-top:10%;}

이런식으로 변경 해주시면 됩니다. 

속성 값들은 제가 예를 들어 보여 드린것이니 참고만 하시고 정확한 가변 사이즈를 맞춰 주시면 됩니다.

모바일 같은 경우도 해당 css확장자를 찾아서 원하시는 형태의 속성을 적용 시켜 주시면 됩니다.