Why divs are overlapping when browser is shrinked even when i set widths in percentage?

Question

I have divided the screen in two divs with 40% and 59% widths but whenever i am shrinking my browser the second div overlaps the first div. Where am i going wrong?

#watch-container{
    width: 40%;
    height: 100vh;
    display: inline-block;
}
#watch-container .watch-skin{
    height: 60%;
    margin-left: 170px;
    margin-top: 110px;
}

#desc-container{
    width: 59%;
    height: 100vh;
    font-family: 'Montserrat', sans-serif;
    display: inline-block;
    vertical-align: top;
}

#content-wrapper{
    width: 100%;
}

You can run the code below, or take a look at the codepen - https://codepen.io/tsiruot/pen/GRZMqZY

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

nav{
    background-color: #233D53;
    height: 60px;
}

nav #logo{
    height: 40px;
    margin-left: 45px;
    margin-top: 10px;
}

#watch-container{
    width: 40%;
    height: 100vh;
    display: inline-block;
}
#watch-container .watch-skin{
    height: 60%;
    margin-left: 170px;
    margin-top: 110px;
}

#desc-container{
    width: 59%;
    height: 100vh;
    font-family: 'Montserrat', sans-serif;
    display: inline-block;
    vertical-align: top;
}

#content-wrapper{
    width: 100%;
}

#desc-container h1{
    padding-top: 140px;
    margin-bottom: 20px;
    font-size: 40px;
    font-weight: 1000;
}
#color-header{
    font-size: 18px;
    
}
#desc-container p:nth-child(2){
    padding-bottom: 10px;
    width: 70%;
    font-weight: 500;
}
#desc-container h3{
    padding-bottom: 10px;
}

#color-container button{
    height: 33px;
    width: 45px;
    margin-top: 10px;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 4px;
    border: none;
    outline: none;
}
#color-container button:nth-child(1){
    background-color:#23211f ;
}
#color-container button:nth-child(2){
    background-color: #ca3d22;
}
#color-container button:nth-child(3){
    background-color: #565681;
}
#color-container button:nth-child(4){
    background-color: #8a5362;
}

#desc-container > button:last-child{
    margin-top: 25px;
    background-color: rgb(255, 153, 0);
    width: 120px;
    height: 40px;
    outline: none;
    border-radius: 5px;
    border: 1px solid rgb(218, 131, 0);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    color: black;
    font-weight: 700;
}

#desc-container > button:nth-last-child(3)
{
    width: 100px;
    cursor: pointer;
    height: 30px;
    margin-left: 10px;
    border-radius: 4px;
    background-color: rgb(221, 221, 221);
    outline: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
#desc-container > button:nth-last-child(4)
{
    width: 60px;
    height: 30px;
    border-radius: 4px;
    background-color: rgb(221, 221, 221);
    cursor: pointer;
    outline: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

<header>
        <nav>
            <img id="logo" src="amazon-img.png" alt="Amazon-logo" />
        </nav>
    </header>
    <section>
        <div id="content-wrapper">
        <div id="watch-container">
            <img class="watch-skin" src="https://i.imgur.com/iOeUBV7.png" alt="Black-strap" />
        </div>
        <div id="desc-container">
            <h1>FitBit 20 - The Smartest Watch</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                 Asperiores nisi quae dolorem eaque porro itaque architecto et dolores dolorum natus.</p>
            <br />
            <p id="color-header"><b>Select Color</b></p>
            <div id="color-container">
                <button class="color"></button>
                <button class="color"></button>
                <button class="color"></button>
                <button class="color"></button>
            </div>   
            <br />
            <h3>Features</h3> 
            <button >Time</button>
            <button >Heart Rate</button>
            <br />
            <button>BUY NOW</button>
         </div>
        </div> 
    </section>

Answer 1

Not a fancy answer, but the problem is/are them height: 100vh; remove them. Instead use

..... {
  height:100%;
  min-height:100vh;
}

Answer 2

I seen code.html structure is good but some problem in CSS properties. if you want left images in center of left box, you can apply below code to resolve your problem in all screen.

#watch-container .watch-skin{
    height: 60%;
    margin-left: auto;
    margin-right:auto;
    display:block;
    margin-top: 110px;
}

Answer 3

Actually the divs are not getting overlapped. The image inside #watch-container .watch-skin contains a margin-left of 170px this causes the image move out of its container Remove that value, your screen will be working as expected.

#watch-container .watch-skin{
    height: 60%;
    /* Remove this one */
    /* margin-left: 170px; */
    margin-top: 110px;
}

If you are interested, you could go for a display: flex implementation in css. Only you have to change is the one mentioned below.

#content-wrapper {
  width: 100%;
  display: flex;
}

#watch-container .watch-skin {
  height: 60%;
  margin-left: auto;
  margin-top: 110px;
}

This will give automatic marin-left with respect to your available space for the image.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  background-color: #233D53;
  height: 60px;
}

nav #logo {
  height: 40px;
  margin-left: 45px;
  margin-top: 10px;
}

#watch-container {
  width: 40%;
  height: 100vh;
  display: flex;  
}

#watch-container .watch-skin {
  height: 60%;
  margin-left: auto;
  margin-top: 110px;
}

#desc-container {
  width: 59%;
  height: 100vh;
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  vertical-align: top;
}

#content-wrapper {
  width: 100%;
  display: flex;
}

#desc-container h1 {
  padding-top: 140px;
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 1000;
}

#color-header {
  font-size: 18px;

}

#desc-container p:nth-child(2) {
  padding-bottom: 10px;
  width: 70%;
  font-weight: 500;
}

#desc-container h3 {
  padding-bottom: 10px;
}

#color-container button {
  height: 33px;
  width: 45px;
  margin-top: 10px;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 4px;
  border: none;
  outline: none;
}

#color-container button:nth-child(1) {
  background-color: #23211f;
}

#color-container button:nth-child(2) {
  background-color: #ca3d22;
}

#color-container button:nth-child(3) {
  background-color: #565681;
}

#color-container button:nth-child(4) {
  background-color: #8a5362;
}

#desc-container>button:last-child {
  margin-top: 25px;
  background-color: rgb(255, 153, 0);
  width: 120px;
  height: 40px;
  outline: none;
  border-radius: 5px;
  border: 1px solid rgb(218, 131, 0);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  color: black;
  font-weight: 700;
}

#desc-container>button:nth-last-child(3) {
  width: 100px;
  cursor: pointer;
  height: 30px;
  margin-left: 10px;
  border-radius: 4px;
  background-color: rgb(221, 221, 221);
  outline: none;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

#desc-container>button:nth-last-child(4) {
  width: 60px;
  height: 30px;
  border-radius: 4px;
  background-color: rgb(221, 221, 221);
  cursor: pointer;
  outline: none;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

<header>
  <nav>
    <img id="logo" src="amazon-img.png" alt="Amazon-logo" />
  </nav>
</header>
<section>
  <div id="content-wrapper">
    <div id="watch-container">
      <img class="watch-skin" src="https://i.imgur.com/iOeUBV7.png" alt="Black-strap" />
    </div>
    <div id="desc-container">
      <h1>FitBit 20 - The Smartest Watch</h1>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Asperiores nisi quae dolorem eaque porro itaque architecto et dolores dolorum natus.</p>
      <br />
      <p id="color-header"><b>Select Color</b></p>
      <div id="color-container">
        <button class="color"></button>
        <button class="color"></button>
        <button class="color"></button>
        <button class="color"></button>
      </div>
      <br />
      <h3>Features</h3>
      <button>Time</button>
      <button>Heart Rate</button>
      <br />
      <button>BUY NOW</button>
    </div>
  </div>
</section>

Answer 4

You have set the containers to percentage width, but the content of the 'watch-container' div is not responsive so it is overflowing its container as the container gets smaller.

This is what you are using:

#watch-container .watch-skin{
    height: 60%;
    margin-left: 170px;
    margin-top: 110px;
}

Between the width of the image and the left margin, the contents is over 500px regardless of what size the container is.

You need to remove the margin (use margin:auto to center the image if you want). You also need to make the image responsive based on width not height:

#watch-container .watch-skin{
    width: 100%;
    margin: auto;
    margin-top: 110px;
}

Working Example: This is your working code with responsive content for #watch-container - note the image is going to get very small when it has to fit in 40% of the screen. It would help if you didn't have the white space around the watch in the image:

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

nav{
    background-color: #233D53;
    height: 60px;
}

nav #logo{
    height: 40px;
    margin-left: 45px;
    margin-top: 10px;
}

#watch-container{
    width: 40%;
    height: 100vh;
    display: inline-block;
}
#watch-container .watch-skin{
    width: 100%;
    margin: auto;
    margin-top: 110px;
}

#desc-container{
    width: 59%;
    height: 100vh;
    font-family: 'Montserrat', sans-serif;
    display: inline-block;
    vertical-align: top;
}

#content-wrapper{
    width: 100%;
}

#desc-container h1{
    padding-top: 140px;
    margin-bottom: 20px;
    font-size: 40px;
    font-weight: 1000;
}
#color-header{
    font-size: 18px;
    
}
#desc-container p:nth-child(2){
    padding-bottom: 10px;
    width: 70%;
    font-weight: 500;
}
#desc-container h3{
    padding-bottom: 10px;
}

#color-container button{
    height: 33px;
    width: 45px;
    margin-top: 10px;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 4px;
    border: none;
    outline: none;
}
#color-container button:nth-child(1){
    background-color:#23211f ;
}
#color-container button:nth-child(2){
    background-color: #ca3d22;
}
#color-container button:nth-child(3){
    background-color: #565681;
}
#color-container button:nth-child(4){
    background-color: #8a5362;
}

#desc-container > button:last-child{
    margin-top: 25px;
    background-color: rgb(255, 153, 0);
    width: 120px;
    height: 40px;
    outline: none;
    border-radius: 5px;
    border: 1px solid rgb(218, 131, 0);
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    color: black;
    font-weight: 700;
}

#desc-container > button:nth-last-child(3)
{
    width: 100px;
    cursor: pointer;
    height: 30px;
    margin-left: 10px;
    border-radius: 4px;
    background-color: rgb(221, 221, 221);
    outline: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
#desc-container > button:nth-last-child(4)
{
    width: 60px;
    height: 30px;
    border-radius: 4px;
    background-color: rgb(221, 221, 221);
    cursor: pointer;
    outline: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

<header>
        <nav>
            <img id="logo" src="amazon-img.png" alt="Amazon-logo" />
        </nav>
    </header>
    <section>
        <div id="content-wrapper">
        <div id="watch-container">
            <img class="watch-skin" src="https://i.imgur.com/iOeUBV7.png" alt="Black-strap" />
        </div>
        <div id="desc-container">
            <h1>FitBit 20 - The Smartest Watch</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                 Asperiores nisi quae dolorem eaque porro itaque architecto et dolores dolorum natus.</p>
            <br />
            <p id="color-header"><b>Select Color</b></p>
            <div id="color-container">
                <button class="color"></button>
                <button class="color"></button>
                <button class="color"></button>
                <button class="color"></button>
            </div>   
            <br />
            <h3>Features</h3> 
            <button >Time</button>
            <button >Heart Rate</button>
            <br />
            <button>BUY NOW</button>
         </div>
        </div> 
    </section>