Div color background error - html

Question

the issue I am having is that when I change my browser size to tablet and mobile my quotes and testimonials named Jerry and Michelle go outside of the color background which makes me think that they aren't nested correctly. However, I looked at it and I believe it should work but somehow it isn't. The easiest way to see this since I just isolated this code and my whole site isn't pushing it out of the background colored box, is if you make the code snippet full-sized and put the browser to the smallest width. You will see the quotes outside of the colored box. If anyone could spot the issue and let me know it would be greatly appreciated! Thank you!
#colorbk{
background-color: #1DA0A3;
}
.container {
display: flex;
background-color: #1DA0A3;
flex-flow: row wrap;
max-width:1700px;
margin: 0 auto;
}
#qwrapper {
display: flex;
height: 100%;
width: 100%;
align-items:center;
justify-content:center;
margin:10px;
background-color:#1DA0A3;
}
.row {
flex: 0 auto;
height: 100px;
margin:0;
}
#lighticon{
padding-bottom:30px;
}
#jerry{
width:400px;
}
#michelle{
width:400px;
}
.italic{
font-style:italic;
}
.right{
float:right;
}
#media (max-width: 800px) {
#qwrapper {
flex-direction: column;
align-items: center;
}
}
#media screen and (max-width:480px) {
#qwrapper {
flex-wrap: wrap;
}
.row {
}
}
#media only screen and (min-width: 760px) {
#qwrapper{
justify-content: space-around;
margin:10px;
}
}
<div id="colorbk">
<div class="container">
<div id="qwrapper">
<h3 id="michelle" class="row" ><div class="italic">"She always thinks of her clients."</div>
<br>
<div class="right" id="connect">-Michelle Houle Conn. FSE</div>
</h3>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" class="row" alt="" id="lighticon"/>
<h3 id="jerry" class="row"><div class="italic">"Very smart, creative person, problem solver."</div>
<br>
<div class="right">-Jerry Nygard C2P</div>
</h3>
</div>
</div>
</div>

Answer 1

You can simply solve the issue by removing width:400px from inner texts:
#jerry{
/*width:400px;*/
}
#michelle{
/*width:400px;*/
}
as in following snippet:
#colorbk{
background-color: #1DA0A3;
}
.container {
display: flex;
background-color: #1DA0A3;
flex-flow: row wrap;
max-width:1700px;
margin: 0 auto;
}
#qwrapper {
display: flex;
height: 100%;
width: 100%;
align-items:center;
justify-content:center;
margin:10px;
background-color:#1DA0A3;
}
.row {
flex: 0 auto;
height: 100px;
margin:0;
}
#lighticon{
padding-bottom:30px;
}
#jerry{
/*width:400px;*/
}
#michelle{
/*width:400px;*/
}
.italic{
font-style:italic;
}
.right{
float:right;
}
#media (max-width: 800px) {
#qwrapper {
flex-direction: column;
align-items: center;
}
}
#media screen and (max-width:480px) {
#qwrapper {
flex-wrap: wrap;
}
.row {
}
}
#media only screen and (min-width: 760px) {
#qwrapper{
justify-content: space-around;
margin:10px;
}
}
<div id="colorbk">
<div class="container">
<div id="qwrapper">
<h3 id="michelle" class="row" ><div class="italic">"She always thinks of her clients."</div>
<br>
<div class="right" id="connect">-Michelle Houle Conn. FSE</div>
</h3>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" class="row" alt="" id="lighticon"/>
<h3 id="jerry" class="row"><div class="italic">"Very smart, creative person, problem solver."</div>
<br>
<div class="right">-Jerry Nygard C2P</div>
</h3>
</div>
</div>
</div>
Edit:
for your jsFiddle, i modify it as following:
jsfiddle.net/81d8trag/2
remove height:100px from .row class. also as the last icon has set its size with that row class, i add width:100px to it in #lighticon css:
.row {
flex: 0 auto;
/*height: 100px;*/
margin:0;
}
#lighticon{
width:100px;
padding-bottom:30px;
}

Answer 2

that's because you are fixing the width of
#jerry {
width: 400px;
}
#michelle {
width: 400px;
}
to 400px, so no matter how large or small your screen size is, it is fixed to 400px. if you want to make it responsive you have to use %.