Having an issue with my pop-up window where the header is misaligned to the left, possibly due to the close button. Can anyone provide assistance?
Below is the CSS code for reference:
.popUpModal{
display: none;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: fixed;
top: 0;
justify-content: center;
align-items: center;
text-align: center;
}
.popUpContent{
padding-bottom: 20px;
width: 50%;
height: 80%;
background-color: white;
border-radius: 8%;
display: inline-block;
justify-content: center;
vertical-align: center;
font-family: "Source Sans Pro",sans-serif;
}
.close{
float: right;
margin-right: 5%;
font-size: 40px;
transform: rotate(45deg);
font-weight: bold;
cursor: pointer;
}
.trainingPopUpHeader{
margin-top: 4%;
font-size: 40px;
text-decoration: underline;
}
.trainingPopUpDescription{
font-size: 20px;
margin-top: 4%;
margin-left: 10%;
margin-right: 10%;
}
.trainingStepList{
font-weight:bold;
text-align: left;
font-size: 30px;
margin-left: 4%;
}
.trainingVideo{
height: 35%;
border-radius: 5%;
margin-bottom: 3%;
} <div class="popUpModal" id=popUpModal>
<div class="popUpContent">
<div class="close">+</div>
<h1 class="trainingPopUpHeader">How to Change Labels</h1>
<div class="trainingPopUpDescription">
<p>When the labeler machine runs out of labels, it is up to one of the associates to
replace the labels
so the machine can continue running. It is important to be quick and accurate when
reloading the labels.
Watch the video and read the step-by-step instructions to complete this training.
</p>
</div>
<div class= "trainingStepList">
<p>
1. Pull off used back paper <br>
2. Find new pack of front & back labels <br>
3. Insert front labels onto the front left roller <br>
4. Insert back labels onto the front right roller <br>
</p>
</div>
<video class="trainingVideo" controls>
<source src="testVid.mp4">
</video>
<!--add video element-->
<!--add step by step instructions-->
<!--need a text header, a step by step instruction list, a video, and an input form for name-->
</div>
</div>https://i.sstatic.net/cU5YI.png
Seeking insights on why the header appears misaligned due to the close button in my pop-up window.