As a beginner in HTML and CSS, I am currently working on creating a website for my project. However, one of the requirements is that it should be responsive. I have encountered an issue where my yellow box appears to be getting smaller while the red and blue boxes maintain their size when viewed on different devices such as smartphones and laptops. I would greatly appreciate any help or advice on how to make my website more responsive. Thank you.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4" style="margin-left: 3%" >
<div class="color">Column 1</div>
<div class="color" >Column 2</div>
</div>
<div class="col-md-8">Column 3</div>
</div>
<style type="text/css">
.color:nth-child(1) {
background:red;
height:40%;
margin-top:5%;
margin-left: 2%;
border-radius: 4%;
width: 100%;
}
.color:nth-child(2) {
margin-top: 3%;
border-radius: 4%;
background:blue; height:260px;
}
.col-md-8 {
background:yellow; height:628px;
width: 38%;
margin-left: 15%;
margin-top: 1%;
border-radius: 9%;
}
</style>