html - Margin issue only in a certain media query -


i running strange issue throwing off whole page in media query range of @media screen , (min-width: 640px) , (max-width:840px). reason looks getting margin-left applied first box-container have, in code there isn't margin-left set. tried apply start of div blue-box-container right after sibling above eliminate white-space, did not help.

does have idea why getting white-space left of first blue box?

if needs see live, can add website inside of comments. please comment if wanting it.

margin can seen here

.blue-box-container {     width: 100%;     height: 100%; } .dark-blue-box, .light-blue-box {     height: 33%;     width: 50%;     display: inline-block; } .dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover {     display: block;     font-size: 1.1em;     padding-top: 10px; } .dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover {     display: block;     font-size: .9em;     padding-top: 5px;     clear: both; } .dark-blue-box:hover .insideboxwrap, .light-blue-box:hover .insideboxwrap {     padding: 3% 6%; } .dark-blue-box:hover .box-title, .light-blue-box:hover .box-title {     padding-top: 7%; } .dark-blue-box:nth-child(3){     background-color: #8fc9d6;  } .light-blue-box:nth-child(4){     background-color: #45a5ba; } .dark-blue-box:nth-child(3):hover, .light-blue-box:nth-child(4):hover{     background-color: purple; } .dark-blue-box:nth-child(5){     background-color: #45a5ba;  } .light-blue-box:nth-child(6){     background-color: #8fc9d6; } .insideboxwrap {     padding: 10% 30px; } .box-title {     font-size: 2em; } .box-description {     padding-top: 5px;     font-size: 1.1em; } /*------home icons ------*/ .home-icon img {     height: 52px;     width: 52px;     padding-right: 6%;     padding-bottom: 10px;     float: left; } .dark-blue-box:hover .home-icon img, .light-blue-box:hover .home-icon img {     height: 76px;     width: 76px; } 

html - rather attaching of blocks, have applied 2 blocks demonstrate general sequence.

<div class="blue-box-container">   <div class="dark-blue-box">     <div class="insideboxwrap">         <div class="home-icon"><img src="/icons/screen6.png" alt=""></div>         <div class="box-title">brand strategy</div>         <div class="box-description">digital roadmap</div>         <div class="box-description-hover">hover view fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs         fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>     </div>   </div><div class="light-blue-box">     <div class="insideboxwrap">         <div class="home-icon"><img src="/icons/web2.png" alt=""></div>         <div class="box-title">development</div>         <div class="box-description">that outperforms</div>         <div class="box-description-hover">hover view fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs         fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>     </div>   </div>  </div> 

there multiple solutions possible, suggest adding float boxes:

.dark-blue-box, .light-blue-box {     height: 33%;     width: 50%;     display: inline-block;     float: left; } 

it fixes issue.


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -