I'm having trouble adjusting the background of the div in the Chrome browser. If you see, I have a small light gray box that I did not implement and did not give style. It appears randomly and moves and transforms at its discretion. This does not happen in Safari or Firefox, and I cannot figure out why or how to fix it.
My problem is rather strange. I have the following code:
div className="row competition">
<div className="col-lg-6 register-answer">
<div className="compet-content">
<input type="text" className="form-control answer" id="usr"/>
<input type="text" className="form-control email" id="usr"/>
<button type="button" className="btn btn-primary">Enter Competition</button>
</div>
</div>
<div className="col-lg-6">
<div className="pic">
<img src={CompetitionImage} alt="Competition Image"/>
</div>
</div>
</div>
Edited (CSS classes):
.col-lg-6.register-answer {
background-color: #adadad;
.compet-content {
width: 100%;
height: 100%;
input {
}
button {
}
}
}
I set backgound-color in the "register-answer" class, but I tried in each div, and the problem is always the same (this only happens on chrome). I also have a screen recording: https://drive.google.com/file/d/0B9yzCbrCAKvKRVE3VmNJNmhqLVk/view?usp=sharing