Content is scattered (Google searches did not help at all) - html

Question

body {
font-family: Bahnschrift SemiBold, sans-serif;
background-color: #fcfefe;
width: 100%;
height: 100%;
overflow-x: hidden;
}
*{
margin:0; padding: 0;
}
.logonav{
position: top;
left: 0px;
width: 250px;
height: 65px;
padding-top: 70px;
padding-bottom: 20px;
padding-left: 40px;
}
.content{
position: absolute;
bottom: 330px;
left: 30px;
text-align: justify;
font-size: 20px;
font-family: 'Titillium Web', sans-serif;
color: #ffffff;
}
.bn632-hover {
position: absolute;
bottom: 200px;
left: 1200px;
width: 160px;
font-size: 16px;
font-weight: 600;
color: #00bbf0;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
color: whitesmoke;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn18 {
background-image: linear-gradient(
to right,
#25aae1,
#00bbf0,
#00bbf0,
#00bbf0
);
box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.image_container.img{
max-height: 100vh;
max-width: 100%;
object-fit: cover;
object-position: bottom;
}
.pozadina{
background-color: #83a3c7;
background-image: url("womandoctor.jpg");
background-size: cover;
width: 110%;
background-blend-mode: normal;
position: relative;
padding-top: 450px;
padding-bottom: 100px;
}
.hornav1{
overflow: hidden;
width: 100%;
background-color: #00bbf0;
list-style-type: none;
margin: 0px;
padding: 0px;
border-bottom: solid 2px #eaf6f6;
size: 100px;
position:fixed;
top:0;
z-index:100;
}
.hornav1 a{
float: right;
color: whitesmoke;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
box-sizing: border-box;
margin-left: 5px 10 px;
}
.hornav1 i{
color: whitesmoke;
}
#pocetna{
padding-right: 1000px;
font-size: 20px;
}
.hornav2{
overflow: hidden;
width: 100%;
background-color: #ffffff;
list-style-type: none;
margin: 0px;
padding: 0px;
position: sticky;
top: 0px;
border-bottom: solid 2px #eaf6f6;
}
.hornav2 a{
float: right;
color: #333;
text-align: center;
padding: 14px 16px;
font-size: 17px;
box-sizing: border-box;
margin-left: 5px 10 px;
}
.hornav3{
overflow: hidden;
width: 100%;
background-color: #00bbf0;
list-style-type: none;
margin: 0px;
padding: 10px;
position:sticky;
border-bottom: solid 2px #eaf6f6;
size: 150px;
}
.hornav3 a{
position: relative;
color: whitesmoke;
text-align: center;
padding-left: 50px;
text-decoration: none;
font-size: 24px;
box-sizing: border-box;
right : -270px;
}
.navcontainer{
top:0;
width:100%;
z-index:100;
}
.hornav3 a::before{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: whitesmoke;
transition: width 0.6s cubic-bezier(0.5, 1, 0.5, 1);
}
#media (hover: hover) and (pointer: fine) {
.hornav3 a:hover::before{
left: 0.5;
right: auto;
width: 70%;
}
}
.pregledi{
background-color: #fafafa;
}
.pregledi .heading{
padding-top: 40px;
text-transform: uppercase;
color: deepskyblue;
text-align: center;
font-size: 35px;
}
.pregledi .heading2{
padding-top: 5px;
text-align: center;
font-size: 20px;
font-family: unset;
color: #2c5d63;
}
.pregledi .box-container{
padding-top: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 7fr));
gap:4rem;
margin-left: 60px;
margin-right: 30px;
}
.pregledi .box-container .box h3{
padding-top: 10px;
color: deepskyblue;
text-transform: uppercase;
font-size: 2.1rem;
}
.pregledi .box-container .box p{
padding-top: 10px;
font-family: sans-serif;
font-size: 1rem;
line-height: 1;
}
.pregledi .box-container .box a{
position: relative;
top: 10px;
}
.bn111 {
margin-top: 10px;
padding: 1.3em 0.01em;
font-size: 12px;
text-transform: uppercase;
text-indent: 10px;
letter-spacing: 2.5px;
font-weight: 500;
color: #ffffff;
background-color: #00bbf0;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.24s ease 0s;
cursor: pointer;
outline: none;
}
.bn111:hover {
background-color: #00bbf0;
box-shadow: 0px 15px 20px rgba(34, 180, 255, 0.4);
color: #ffffff;
transform: translateX(7px) translateY(-1.1px);
}
.bn111:active {
transform: translateY(-1px);
}
.bn111 i{
color: #ffffff;
font-size: 1.3em;
padding-right: 4px;
}
.izborna{
background-color: #83a3c7;
background-size: cover;
width: 100%;
background-blend-mode: normal;
opacity: 1;
display: block;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.containerslike{
position: relative;
width: 100%;
max-width: 400px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: #ececec;
}
.containerslike:hover .overlay {
opacity: 0.5;
}
.ikona {
color: deepskyblue;
font-size: 40px;
position: absolute;
top: 100%;
left: 45%;;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
opacity: 1;
}
.fa-magnifying-glass{
position: absolute;
top: 100px;
}
.bn112 {
margin-top: 10px;
padding: 1.3em 0.01em;
font-size: 18px;
text-transform: uppercase;
text-indent: 10px;
letter-spacing: 2.5px;
font-weight: 500;
color: #ffffff;
background-color: #00bbf0;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.24s ease 0s;
cursor: pointer;
outline: none;
width: 400px;
}
.bn112:hover {
background-color: #00bbf0;
box-shadow: 0px 15px 20px rgba(34, 180, 255, 0.4);
color: #ffffff;
transform: translateY(-1.1px);
}
.bn112:active {
transform: translateY(-1px);
}
.bn112 i{
color: #ffffff;
font-size: 1.3em;
padding-right: 4px;
}
.podnopregled{
margin-left: 500px;
}
.infodiv{
margin-top: 30px;
background-color: deepskyblue;
}
.row {
display: flex;
width: 100%;
}
.noMargin {
margin: 1px;
}
.one {
background-color: #79c2d0;
border: solid #ececec;
height: 300px;
width: 100%;
border-radius: 15px;
margin-top: 30px;
}
.two {
background-color: #79c2d0;
border: solid #ececec;
height: 300px;
width: 100%;
border-radius: 15px;
margin-top: 30px;
}
.three {
background-color: #79c2d0;
border: solid #ececec;
height: 300px;
width: 100%;
border-radius: 15px;
margin-top: 10px;
}
.four {
background-color: #79c2d0;
border: solid #ececec;
height: 300px;
width: 100%;
border-radius: 15px;
margin-top: 10px;
}
.noMargin p{
text-align: center;
margin-top: 100px;
}
#media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
#media only screen and (max-width:500px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VivaMed medicina rada i sporta</title>
<script src="https://kit.fontawesome.com/60681a69ff.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="VivamedCSS.css">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<div class="navcontainer">
<div class="hornav1">
<i class="fas fa-envelope" style="font-size:20px;"></i> info#vivamed.hr
<i class="fa-solid fa-phone"style="font-size:20px;" ></i> [phone]
Početna
</div>
<div class="hornav2">
<img src="vivalogo.webp" alt="logo" class="logonav">
<a class="active" style="font-size: 20px; padding-right: 550px; padding-top: 100px; font-family: 'Titillium Web', sans-serif; font-style: italic; font-weight: bolder;"> Zdrav radnik je uspješan i produktivan radnik.</a>
</div>
<div class="hornav3">
<a class="active" href="https://www.vivamed.hr/kontakt"><i class="fas fa-envelope" style="font-size:20px;"></i> Kontakt</a>
<a class="active" href="https://www.vivamed.hr/kontakt"><i class="fas fa-cloud" style="font-size:20px; color: whitesmoke;"></i> Kontakt</a>
<a class="active" href="https://www.vivamed.hr/kontakt"><i class="fas fa-comment" style="font-size:20px;"></i> Kontakt</a>
<a class="active" href="https://www.vivamed.hr/kontakt"><i class="fas fa-car" style="font-size:20px;"></i> Kontakt</a>
<a class="active" href="https://www.vivamed.hr/galerija"><i class="fas fa-bolt" style="font-size:20px;"></i> O nama</a>
<a class="active" href="file:///C:/Users/Admin/Desktop/Vivamed/VIVAMED%20JEDAN.html#slide-2"><i class="fas fa-envelope"></i> Početna</a>
</div>
</div>
<div class="pozadina">
<div class="content">
<h3>Dobro došli na stranicu Medicine rada i sporta VivaMed!</h3>
<p>Pogledajte sve profesionalne usluge koje nudi
<br>naš tim vrhunskih i renomiranih stručnjaka!
</p>
</div>
<button class="bn632-hover bn18">Naručite se!</button>
</div>
<section class="pregledi" id="pregledi">
<h1 class="heading"> <span> Stručno, brzo i povoljno! </span> </h1>
<h2 class="heading2"> <span>Izdvojeni pregledi</span></h3>
<div class="box-container">
<div class="box">
<div class="containerslike">
<img src="pexels-pixabay-262524.jpg" class="izborna">
<div class="overlay">
<a href="https://www.vivamed.hr/usluge/pregledi" class="ikona">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
</div>
<h3>Pregled sportaša</h3>
<p>Rekreativci, amateri, profesionalci</p>
<button class="bn111" id="bn111"> Opširnije<i class="fa-solid fa-arrow-right"></i></button>
</div>
<div class="box">
<div class="containerslike">
<img src="delivery-driver-smiling-camera-his-van_13339-235836.jpg" class="izborna">
<div class="overlay">
<a href="https://www.vivamed.hr/usluge/pregledi" class="ikona">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
</div>
<h3>Pregled vozača</h3>
<p>Sve vrste kategorija i pregleda</p>
<button class="bn111" id="bn111"> Opširnije<i class="fa-solid fa-arrow-right"></i></button>
</div>
<div class="box">
<div class="containerslike">
<img src="happy-graduate-woman-mantle-rejoicing-laughing-smiling_176420-14226.webp" class="izborna">
<div class="overlay">
<a href="https://www.vivamed.hr/usluge/pregledi" class="ikona">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
</div>
<h3>Učenici i studenti</h3>
<p>Upisi u srednje škole, fakultete i druge akadamske ustanove</p>
<button class="bn111" id="bn111"> Opširnije<i class="fa-solid fa-arrow-right"></i></button>
</div>
<div class="podnopregled">
<button class="bn112" id="bn112"> Svi pregledi<i class="fa-solid fa-arrow-right"></i></button>
</div>
</div>
</section>
<!--
-->
<div class="infodiv">
<div class="row noMargin">
<div class="one">
<p>Radno vrijeme<br>
ponedjeljak 07 - 15
utorak 07 - 18
srijeda 07 - 14
četvrtak 07 - 14
petak 07 - 14
i prema dogovoru </p>
</div>
<div class="two">
<p>Adresa<br>
Krešićeva ul. 32/1. Kat (okretište tramvaja Borongaj)</p>
</div>
</div>
<div class="row noMargin">
<div class="three">
<p>Email<br>
info#vivamed.hr</p>
</div>
<div class="four">
<p>Telefon<br>
[phone]</p>
</div>
</div>
</div>
</body>
</html>
I've been coding a website in html,css and used some javascript scripts to do it. It is a medical website and so far I've done a lot to the main page which is my main problem here. I am self-taught and all the paddings, margins and screen-fits that I've coded into it are were actually applying only to the screen size that is on my laptop, and not others. I've tested this by uploading the files to InfintyFree and making it online just for the sake of testing it on other screens, and what happens is that all the content is scattered around the screen. I've put some pictures to show how it looks in comparison with my laptop, other laptop that I have and my phone. Also I've put the html and css code if you can check it out and see where I screwed up and just point me to the core because I really cannot comprehend what is going on.
Thank in advance, and sorry if there was a question like this before, because I haven't found one.[][]
I have tried putting the *{} and changing properties with it, in the body{}, height, width, overflow, padding, margins, Media only screen, everything. Still, everything fixed but only on my laptop on which it was built.