html css 박스안에 이미지 넣지 질문 드려요.

아래 html 과 css 작성했는데 저 중에서 다른곳은 문제가 안되는데 header로 묶은 부분이 문제가 해결이 안되요...

id를 header 하고 그 안에 img를 넣어서 header로 만든 박스 크기에 맞게 이미지 크기를 자동으로 맞추고 싶은데

계속 밖으로 삐져나가고 인터넷 찾으면 하는데 지금은..... 아예 header 박스가 없어졌어요...

무엇이 문제인지 알려주세요... 아니면 id를 header로 쓰면 안되는건가요???

 

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/style.css">
  <title>1</title>
</head>

<body>

  <div id="jb-container">
    <div id="jb-header">
      <div class="jb-img">
        <img src="./image/img01.jpg" alt="">
      </div>
    </div>

    <div id="jb-content">
      <img src="./image/img02.jpg" alt="">
    </div>

    <div id="jb-content1">
      <img src="./image/img03.jpg" alt="">
    </div>

    <div id="jb-footer">
      <img src="./image/img04.jpg" alt="">
    </div>

    <div id="jb-footer">
      <img src="./image/img05.jpg" alt="">
    </div>
  </div>

</body>

</html>

 

CSS

body {
  margin: 20px;
}

#jb-container {
  width: 100%;
  padding: 50px 0;
  overflow: hidden;
  zoom: 1;
  z-index: 1;
  padding: 0px;
  border: 3px dotted red;
}

#jb-header {
  width: 100%
}

#jb-content {
  padding: 0px 10px 0px 0px;
  margin-bottom: 0px;
  border: 3px solid green;
  margin: 3px solid blue;
}
#jb-content1 {
  padding: 0px 10px 0px 0px;
  margin-bottom: 20px;
  border: 3px solid green;
  margin: 3px solid blue;
}
#jb-footer {
  clear: both;
  padding: 0px 10px 10px 0px;
  border: 3px solid green;
  margin: 3px solid blue;
}

@media ( max-width: 720px ) {
  #jb-container {
    width: auto;
  }
  #jb-header {
    float: none;
    width: auto;
  }
  #jb-content {
    float: none;
    width: auto;
  }
  #jb-sidebar {
    float: none;
    width: auto;
  }
}
 

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기