html - How to make background(color, not img) responsive? -

i building responsive page. 1 section has problem. when make screen smaller background-color goes out(down on few mm).i checked - when don't have background - don't have problem. how fix it? why happen?

.bottomright{  	grid-area: bottomright;  	display: flex;  	justify-content: center; 	  	align-items: center;  	flex-direction: column;  	background-color: #d3d3d3;  	position: relative; 	  }  .bottomright:hover{	  	z-index: 1;      box-shadow: 0px -2px 24px 2px rgba(0,0,0,0.2);  	transform: scale(1.02);  }  .bottomright h4{  	color: #808080;	  	flex: 0 0 auto;   	align-self: flex-start;  	position: absolute;  	top:2rem;  	left: 2rem;  }  .bottomright img{  	flex: 0 1 auto;  	align-self:center;	  	max-width: 80%;  }

 <div class="bottomright">                  <h4>shcedule meeting @                      <p>ibc 2016</h4>                  <img src="comigo/other/img-event-ibc.jpg">              </div>

everything want responsive put in div , have set media screen propperty's each display device in css.

like this:

@media screen , (min-width: 1024px){     .responsive{         ...     } } @media screen , (min-width: 980px) , (max-width: 1024px){     .responsive{         ...     } }  /* tablet */ @media screen , (min-width: 760px) , (max-width: 980px){     .responsive{         ...     } }  /* mobile hd */ @media screen , (min-width: 350px) , (max-width: 760px){     .responsive{         ...     } }  /* mobile ld */ @media screen , (max-width: 350px){     .responsive{         ...     } }