Welcome to the world of web development and bootstrap! I'm currently working on making my page responsive, but running into issues with divs overlapping when the browser is resized.
- Here is a picture showing the zoomed out and zoomed in versions of the page - https://i.sstatic.net/d6Pm4.jpg
As you can see, the top div is labeled "main-content" and the bottom white div is labeled "content". The top 3 pictures (top-hive) and the bottom 2 pictures (bottom-hive) are each contained within separate divs. However, when the page is zoomed out, these pictures extend beyond their respective divs.
I would greatly appreciate it if someone could provide guidance or suggestions on how to address this issue.
HTML
<!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">
<title>S.H.I.E.L.D</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="nav container">
</div>
<div class="main-content container">
<div class="top-hive row">
<img src="images/hive1.png">
<img src="images/hive2.png">
<img src="images/hive3.png">
</div>
<div class="bottom-hive row">
<img src="images/hive4.png">
<img src="images/hive5.png">
</div>
</div>
<div class="content container">
</div>
<div class="footer container">
<h5>Copyright (2015)</h5>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
body {
background: url(../images/BG_01.png) repeat fixed top center;
background-size: 100% auto;
}
/*NAV*/
.nav {
background: url(../images/header_01.png);
background-position: center;
height: 417px;
width: 100%;
position: relative;
z-index:2;
}
/*MAIN CONTENT*/
.main-content {
background: url(../images/CBG_03.png) no-repeat;
height: 684px;
background-position: center;
max-width: 100%;
text-align: center;
margin-top: -215px;
position: relative;
z-index:1;
}
.top-hive {
margin-top: 106px;
}
.top-hive img {
padding: 5px;
}
.bottom-hive {
margin-top: -60px;
}
.bottom-hive img {
padding: 5px;
}
/*CONTENT*/
.content {
background: url(../images/CBG2_03.png) no-repeat;
height: 621px;
background-position: center;
width: 100%;
text-align: center;
margin-top: -12px;
}
.text h3 {
text-transform: uppercase;
font-size: 2.1em;
}
.text p {
font-size: 1em;
}
.footer {
background: #050719 url(../images/footer_02.png)repeat;
height: 178px;
width: 100%;
text-align: center;
background-position: center;
}
/*FOOTER*/
.footer h5 {
color: #58a7d9;
margin-top: 127px;
}