Image alignment changed in IE (edge) and google Chrome - html

Question

I have been creating this website and it came along just fine. And then I tried to add a modal to it and everything kinda went downhill. The issue is that after adding the modal the image alignment changed in Chrome. It works fine in Edge. Now I am aware that this could be because whatever element I added might not be supported in IE thus making it look ok. The first image shown here is in IE and how I want it to look like
The second image is how it looks on Google Chrome
Here is the Html related to the images
<div class="coverimage">
<img src="https://imgur.com/cHmH0K5" name="currentimage" id="currentimage" alt="Jurassic World-Fallen Kingdom" style="width:1350px;height:780px;display:block;">
<h2><span id="main1"> JURASSIC WORLD:<br>FALLEN <br>KINGDOM(3D)</span></h2>
</div>
<div class="container">
<div class="submovies" style="float:left;">
<img src="https://imgur.com/GmqzA9C" name="submovie1" id="submovie1" alt="Hotel Transylvania 3" style="width:600px;height:400px;float:left;display:block;">
<img src="https://imgur.com/WGLHxcf" name="submovie2" id="submovie2" alt="Skyscraper" style="width:300px;height:400px;display:block;">
<h4 id="upcoming1"><span> ANT-MAN AND THE WASP</h4>
<span id="subspan1"> IN THEATERS 10TH JULY</span></span>
<h4 id="upcoming2"><span> SKYSCRAPER</h4>
<span id="subspan2"> IN THEATERS 13TH JULY</span></span>
<h4 id="upcoming3"><span> The EQUALIZER 2</h4>
<span id="subspan3"> IN THEATERS 20TH JULY</span></span>
<h4 id="upcoming4"><span> HOTEL TRANSYLVANIA 3</h4>
<span id="subspan4"> IN THEATERS 13TH JULY</span></span>
</div>
<img src="https://imgur.com/cHmH0K5" name="submovie3" id="submovie3" alt="The Equalizer 2" style="width:449px;height:200px;vertical-align:top;max-width:449;display:block;">
<img src="https://imgur.com/hcIgMdJ" name="submovie4" id="submovie4" alt="Hotel Transylvania 3" style="width:449px;height:200px;display:block;">
</div>
Here is the CSS related to these image alignment.
.coverimage {
position: relative;
padding-bottom: 10px;
background-color: #06c6da;
padding-top: 10px;
}
.description {
position: absolute;
bottom: 20px;
right: 20px;
background-color: #000;
color: #FFF;
padding-left: 20px;
padding-right: 20px;
}
h2 {
position: absolute;
top: 180px;
left: 910px;
width: 100%;
font-size: 40px;
color: #FFF;
}
h2 span {
color: #FFF;
display: inline-block;
background: rgba(0, 0, 0, 0.7);
padding: 48px 48px 48px 20px;
}
.submovies {
position: relative;
}
#upcoming1 {
position: absolute;
top: 300px;
left: 20px;
width: 100%;
color: #FFF;
font-weight: Bold;
font-size: 18px;
}
#subspan1 {
position: absolute;
top: 340px;
left: 20px;
width: 100%;
color: #FFF;
font: lighter;
font-size: 12px;
}
#upcoming2 {
position: absolute;
top: 300px;
left: 620px;
width: 100%;
color: #FFF;
font-weight: Bold;
font-size: 18px;
}
#subspan2 {
position: absolute;
top: 340px;
left: 620px;
width: 100%;
color: #FFF;
font: lighter;
font-size: 12px;
}
#upcoming3 {
position: absolute;
top: 110px;
left: 920px;
width: 100%;
color: #FFF;
font-weight: Bold;
font-size: 18px;
}
#subspan3 {
position: absolute;
top: 150px;
left: 922px;
width: 100%;
color: #FFF;
font: lighter;
font-size: 12px;
}
#upcoming4 {
position: absolute;
top: 300px;
left: 920px;
width: 100%;
color: #FFF;
font-weight: Bold;
font-size: 18px;
}
#subspan4 {
position: absolute;
top: 340px;
left: 920px;
width: 100%;
color: #FFF;
font: lighter;
font-size: 12px;
}
Heres the Modal HTML i recently added
<div class="feedback">
<button type="button" id="feedbacksubmit"onclick="">Give us your FeedBack !</button>
</div>
<div class="feedback-background">
<div class="feedback-content">
<div class="close">+</div>
<img src="https://imgur.com/vm4mf6W" alt="Givefeedback" style="width:100px;height:100px;">
<form action="">
Name:
<input type="text" placeholder="Name">
E-Mail:
<input type="text" placeholder="E-mail">
What do you think about us?<br>
<textarea rows="6" cols="33" "name="comment"></textarea>
<br>
How would you rate us ?
<br>
<label><input type ="radio" name="rating" id="rating" value="Excellent">Excellent</label>
<label><input type ="radio" name="rating" id="rating" value="Very Good">Very Good</label>
<label><input type ="radio" name="rating" id="rating" value="Average">Average</label>
<label><input type ="radio" name="rating" id="rating" value="Poor">Poor</label>
<label><input type ="radio" name="rating" id="rating" value="Extreamly Poor">Extremely Poor</label>
<br>
SUBMIT
</form>
</div>
</div>
And here is the CSS it's related with
.feedback-background {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
display: none;
}
.feedback-content {
width: 500px;
height: 550px;
background-color: white;
border-radius: 4px;
padding: 20px;
position: relative;
}
input {
width: 50%;
display: block;
margin: 10px 0px;
}
label {
display: block;
}
input[type="radio"] {
width: auto;
display: inline;
}
.close {
position: absolute;
top: 0px;
right: 14px;
transform: rotate(45deg);
font-size: 42px;
}
#feedbacksubmit {
margin-left: 600px;
margin-bottom: 50px;
background-color: #484848;
border-radius: 14px;
padding: 10px;
cursor: pointer;
color: white;
outline: none;
}

Answer 1

your page is a little disaster... (^_^;) No responsive at all. You have to study hard to understand, for example, how flots works or how absolute position works with its relative block. Inline style are a Css old school and you have to evoid them, if it's possible (and here it is possible!).
However, I aligned every images you post, but please (please!!), redo the work. Consider to use flexbox or grid to transform your page in a 2018 web page.
Best reguards to you, your study and web designer career! ;)
.coverimage{
position:relative;
padding-bottom:10px;
background-color:#06c6da;
padding-top:10px;
}
.description {
position: absolute;
bottom: 20px;
right: 20px;
background-color:black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
h2 {
position: absolute;
top: 180px;
left: 910px;
width: 100%;
font-size:40px;
color:white;
}
h2 span {
color: white;
display:inline-block;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding:48px;
padding-left:20px;
}
.submovies{
position:relative;
}
#upcoming1 {
position: absolute;
top: 300px;
left: 20px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan1{
position: absolute;
top: 340px;
left:20px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
#upcoming2
{
position: absolute;
top: 300px;
left: 620px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan2{
position: absolute;
top: 340px;
left:620px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
#upcoming3 {
position: absolute;
top: 110px;
left: 920px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan3{
position: absolute;
top: 150px;
left:922px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
#upcoming4 {
position: absolute;
top: 300px;
left: 920px;
width: 100%;
color:white;
font-weight:Bold;
font-size:18px;
}
#subspan4{
position: absolute;
top: 340px;
left:920px;
width: 100%;
color:white;
font:lighter;
font-size:12px;
}
<div class="coverimage">
<img src="https://imgur.com/cHmH0K5.jpg" name="currentimage" id="currentimage" alt="Jurassic World-Fallen Kingdom" style="width:1350px;height:780px;display:block;">
<h2><span id="main1"> JURASSIC WORLD:<br>FALLEN <br>KINGDOM(3D)</span></h2>
</div>
<div class="container">
<div class="submovies" style="float:left;width:1449px">
<img src="https://imgur.com/GmqzA9C.jpg" name="submovie1" id="submovie1" alt="Hotel Transylvania 3" style="width:600px;height:400px;float:left;display:block;">
<img src="https://imgur.com/WGLHxcf.jpg" name="submovie2" id="submovie2" alt="Skyscraper" style="width:300px;height:400px;display:block;float:left;">
<h4 id="upcoming1"><span> ANT-MAN AND THE WASP</span></h4><span id="subspan1"> IN THEATERS 10TH JULY</span>
<h4 id="upcoming2"><span> SKYSCRAPER</span></h4><span id="subspan2"> IN THEATERS 13TH JULY</span>
<h4 id="upcoming3"><span> The EQUALIZER 2</span></h4><span id="subspan3"> IN THEATERS 20TH JULY</span>
<h4 id="upcoming4"><span> HOTEL TRANSYLVANIA 3</span></h4><span id="subspan4"> IN THEATERS 13TH JULY</span>
<div style="float:left">
<img src="https://imgur.com/cHmH0K5.jpg" name="submovie3" id="submovie3" alt="The Equalizer 2" style="width:449px;height:200px;vertical-align:top;max-width:449;display:block;">
<img src="https://imgur.com/hcIgMdJ.jpg" name="submovie4" id="submovie4" alt="Hotel Transylvania 3" style="width:449px;height:200px;display:block;">
</div>
</div>
</div>