Cześć! Mam mały skrypcik, który wyświetla H1 z API. Na stronie jest tylko parę divów oraz H1. Dane po pobraniu z API wrzucam do tego H1 przez innerText. Tekst w h1 zmienia ma zmieniać się z każdym odświeżeniem strony.
I tutaj jest właśnie problem, przy pierwszym załadowaniu, centruje się odpowienio, jednak po odświeżeniu strony ucieka w prawą stronę. Poniżej umieszczam kod html i css. Z góry dziękuję, za każda pomoc!
<body>
<div id="main">
<img src="background.jpg" alt="Italian Trulli">
<div id = "quote">
<h1></h1>
</div>
</div>
<script src="scipt.js"></script>
</body>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
*, *::before, *::after{
box-sizing: border-box;
margin: 0;
padding:0;
}
body{
position: absolute;
width: 100%;
height: 100%;
font-family: 'monserat', sans-serif;
color: rgb(173, 33, 150);
}
#main {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
}
#quote{
display: flex;
position: absolute;
top: 20%;
justify-content: center
}