Скатились блоки и стили за черную рамку
У меня по какой-то причине съезжают некоторые стили(большая проблема особенно с блоками). Все в коде стоит вроде нормально,но все равно не выводит нормально стили. Один блок съехал влево, строки в самом верху за черную панель зашли. Надпись "Basic information about this site" вообще куда-то вверх в бок ушла(за блок не зашла)
Код style.css
body{
background-size: cover;
background-repeat:no-repeat;
}
.header_logo_popup img{
background-image: url(C:\OSPanel\domains\ShablonMedicine\wp-content\themes\ShablonMedicine\assets\images\1.jpg);
background-repeat: no-repeat;
background-position: center;
margin-top: 140px;
height: 760px;
width:100%;
background-size: cover;
padding: 0;
margin: 0;
}
.logo{
font-size:70px;
color: aliceblue;
position: absolute;
margin-left: 30px;
top: 25px;
}
.logo_picture img{
background-size: cover;
background-position: center center;
height: 120px;
width: 120px;
margin-left: 540px;
top: 8px;
position: absolute;
}
.header_panel p {
word-spacing: 10px;
font-size:25px;
color:white;
position: absolute;
margin-right:30px;
top: 75px;
left:760px;
}
.header_ss {
font-size: 30px;
margin-left: 760px;
top: 30px;
position: absolute;
}
.header_ss2{
font-size:40px;
position: absolute;
color: white;
top: 935px;
left: 340px;
}
.logo_picture2 img{
background-size: cover;
position: absolute;
height: 450px;
left: 495px;
margin-top: 75px;
}
.logo3{
font-size: 80px;
font-weight: bold;
margin-left: 75px;
position: absolute;
margin-top: 80px;
}
.text{
position: absolute;
font-size: 30px;
margin-top: 200px;
margin-left: 40px;
}
.Button img{
position: absolute;
background-size: cover;
height: 75px;
margin-top: 400px ;
margin-left: 75px;
}
.Podrobno{
font-weight: bold;
color: teal;
font-size: 40px;
margin-top: 407px;
margin-left: 150px;
position: absolute;
}
.logo_picture3 img{
background-size: cover;
position: absolute;
height: 450px;
left: 100px;
margin-top: 75px;
}
.logo4{
font-size: 80px;
font-weight: bold;
margin-left: 800px;
position: absolute;
margin-top: 80px;
}
.text2{
position: absolute;
font-size: 30px;
margin-top: 200px;
margin-left: 770px;
}
.Button2 img{
position: absolute;
background-size: cover;
height: 75px;
margin-top: 400px;
margin-left: 800px;
}
.Podrobno2{
font-weight: bold;
color: teal;
font-size: 40px;
margin-top: 407px;
margin-left: 875px;
position: absolute;
}
.logo_picture4 img{
background-size: cover;
position: absolute;
height: 450px;
left: 430px;
margin-top: 75px;
}
.logo5{
font-size: 80px;
font-weight: bold;
margin-left: 60px;
position: absolute;
margin-top: 80px;
}
.text3{
position: absolute;
font-size: 30px;
margin-top: 200px;
margin-left: 40px;
}
.Button3 img{
position: absolute;
background-size: cover;
height: 75px;
margin-top: 400px ;
margin-left: 50px;
}
.Podrobno3{
font-weight: bold;
color: teal;
font-size: 40px;
margin-top: 407px;
margin-left: 127px;
position: absolute;
}
.text_os{
color: #033;
font-size: 80px;
text-align: center;
margin-top: 200px;
}
.text_info{
color: white;
font-size: 35px;
margin-left: 550px;
margin-top: 40px;
position: absolute;
}
.social_net1 img{
position: absolute;
background-size: cover;
height: 90px;
margin-left: 660px;
margin-top: 150px;
}
.social_net2 img{
position: absolute;
background-size: cover;
height: 90px;
margin-left: 780px;
margin-top: 150px;
}
.social_net3 img{
position: absolute;
background-size: cover;
height: 90px;
margin-left: 900px;
margin-top: 150px;
}
.number{
color: white;
font-size: 50px;
position: absolute;
margin-top: 120px;
margin-left: 40px;
}
.telephone_hot{
color: aquamarine;
font-size: 30px;
position: absolute;
margin-top: 80px;
margin-left: 79px;
}
Код block.css
figure{
font-size: 0;
}
#block1{
height: 140px;
background-color: darkturquoise;
}
#block2{
height:100px;
background-color: #033;
}
#block3{
width: 1180px;
height: 600px;
background-color: whitesmoke;
margin-top: 70px;
}
#block4{
width: 1165px;
height: 600px;
background-color: whitesmoke;
margin-top: 30px;
margin-left: 50px;
}
#block5{
width: 1180px;
height: 600px;
background-color: whitesmoke;
margin-top: 30px;
}
#block6{
height:300px;
background-color: #033;
margin-top: 300px;
}
Код header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel = "stylesheet" href = "/assets/css/magnific-popup.css"/> -->
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
<title><?php bloginfo('description'); ?></title>
</head>
<body <?php body_class(); ?>>
<header class = "header">
<div id = "block1">
<div class = "header_ss">
<?php the_field('header_ss');?>
</div>
<div class="logo_picture">
<img src = "<?php the_field('logo_picture');?>">
</div>
<div class = "logo">
<?php the_field('logo');?>
</div>
</div>
<div class = "header_logo_popup">
<figure>
<img src = "<?php the_field('header_logo_popup');?>">
</figure>
</div>
</header>
Код index.php
<?php get_header(); ?>
<div id = "block2">
<div class = "header_ss2">
Basic information about this site
</div>
</div>
<div id="block3">
<div class = "logo_picture2">
<img src = "<?php the_field('logo_picture2');?>">
</div>
<div class = "logo3">
1 window
</div>
<div class = "text">
Various services related to this site<br>
are added here. In addition to the<br>
text itself, you can add pictures or<br>
even a side.
</div>
<div class = "Button">
<img src = "<?php bloginfo('template_url'); ?>/assets/images/Слой8.png">
</div>
<div class = "Podrobno">
Подробнее
</div>
</div>
<div id ="block4">
<div class = "logo_picture3">
<img src = "<?php the_field('logo_picture3');?>">
</div>
<div class = "logo4">
2 window
</div>
<div class = "text2">
all information about doctors or<br>
other activities telling for trust
</div>
<div class = "Button2">
<img src = "<?php bloginfo('template_url'); ?>/assets/images/Слой8.png">
</div>
<div class = "Podrobno2">
Подробнее
</div>
</div>
<div id="block5">
<div class = "logo_picture4">
<img src = "<?php the_field('logo_picture4');?>">
</div>
<div class = "logo5">
3 window
</div>
<div class = "text3">
information about living in the<br>
territory of this sanatorium
</div>
<div class = "Button3">
<img src = "<?php bloginfo('template_url'); ?>/assets/images/Слой8.png">
</div>
<div class = "Podrobno3">
Подробнее
</div>
</div>
<div class = "text_os">
At the bottom you can add a<br>
lot of different information<br>
about this site
</div>
<div id="block6">
<div class = "telephone_hot">
Telephone hotline
</div>
<div class = "number">
+(000)000-00-00
</div>
<div class = "text_info">
basic information related to contacts,<br>
various socal networks can be placed here
</div>
<div class = "social_net1">
<a><img src = "<?php bloginfo('template_url'); ?>/assets/images/2.png"></a>
</div>
<div class = "social_net2">
<a><img src = "<?php bloginfo('template_url'); ?>/assets/images/4.png"></a>
</div>
<div class = "social_net3">
<a><img src = "<?php bloginfo('template_url'); ?>/assets/images/3.png"></a>
</div>
</div>
<!-- <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<!-- <script src = "/assets/js/jquery.magnific-popup.min.js"></script> -->
<!-- <script src = "/assets/js/main.js"></script> -->
</body>
</HTML>
<?php
get_footer();