Problemy z CSS

Question

Witam,

Mam problem z z responsywnością na stronie. W domu na jednym komputerze strona wygląda dobrze, lecz gdy te stronę uruchomię na innym komputerze o mniejszym ekranie już mi strona się rozjeżdża. Próbowałem zmienić wartości height aby automatycznie dostosowywała się ale nie chce działać. Poniżej wklejam kod html i css. Podacie jakieś linki albo pomysły jak można to naprawić. Dodaje także poniżej sreenshot strony.

Z góry dziękuję za odpowiedź

 

Screenshot strony:

CSS kod:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    font-family: sans-serif;
}

.none
{
    clear: both;
}

/* ------- NAVBAR ------- */

ol
{
	list-style-type: none;
	display: inline-block;
}

ol > li
{
	float: left;
}

ol > li > .ul1
{
	list-style-type: none;
	display: none;
}

ol > li:hover > ul1
{
	display: block;
}

ol > li > ul1 > li:hover > a
{
	color: #000000;
}

.main-bar
{
    background-color: black !important;
    display: flow-root;
    padding: 0 10%;
}

.li1:hover
{
    background-color: red;
    transition: all 0.5s;
}

#check
{
    display: none;
}

.logo-header
{
    display: table;
    float: left;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    padding: 10px;
    width: 180px;
    height: 68px;
    position: relative;
}

.logo-header a
{
    color: #22272b;
    font-size: 33px;
    font-weight: 600;
    line-height: 70px;
    text-decoration: none;
}

nav .ol1 .li1
{
    display: inline-block;
    line-height: 70px;
}

nav .li1 a
{
    padding: 15px 25px;
    border: 0;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    opacity: 1;
    text-decoration: none;
    transition: all 0.5s;
    border-radius: 14px;
}

.ol1
{
    float: right;
}

.img1
{
    float: left;
}

.checkbtn
{
    float: right;
    width: 20px;
    height: 18px;
    position: relative;
    transform: rotate(0);
    transition: 0.5s ease-in-out;
    cursor: pointer;
    top: 25px;
    display: none;
}

.checkbtn .span1
{
    background-color: #fff;
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0);
    transition: 0.25s ease-in-out;
}

.checkbtn .span1:nth-child(1)
{
    top: 0;
}

.checkbtn .span1:nth-child(2)
{
    top: 7px;
}

.checkbtn .span1:nth-child(3)
{
    top: 14px;
}

@media(max-width: 1250px)
{
    .main-bar
    {
        padding: 0 2%;
    }

    nav .li1 a
    {
        padding: 15px 20px;
    }
}

@media(max-width: 992px)
{
    .main-bar
    {
        padding: 0 10%;
    }

    .checkbtn
    {
        display: block;
        margin-right: 40px;
    }

    nav .ol1
    {
        position: fixed;
        width: 350px;
        height: 55vh;
        background: black;
        z-index: 999;
        top: 68px;
        left: -100%;
        text-align: center;
        transition: all 0.5s;
    }

    nav .ol1 .li1
    {
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }

    #check:checked ~ .ol1
    {
        left: 0;
    }
}

@media(max-width: 560px)
{
    nav .ol1
    {
        display: block;
        width: 100%;
    }
}

/* ------- HEADER ------- */

.header
{
    background-color: rgb(9, 9, 9);
    color: white;
    width: 100%;
    min-height: 95vh;
}

.main-baner
{
	width: 80%;
	display: block;
	margin:auto;
	padding-top: 60px;
}

.row5
{
	float: left;
	width: 50%;
    display: block;
}

.logo-header
{
	float: right;
	width: 50%;
    display: block;
}

.title-baner
{
    margin-top: 160px;
    text-transform: uppercase;
	font-size: 24px;
    margin-bottom: 40px;
}

.text-baner p
{
    margin-top: 10px;
	font-size: 18px;
	line-height: 1.5;
    margin-bottom: 50px;
}



/* ------- SECTION ABOUT US, SECTION SHOPS, SECTION MOBILE APP ------- */

.about
{
    background-color: #161616;
    color: white;
    width: 100%;
    min-height: 65vh;
}

.container
{
	width: 80%;
	display: block;
	margin:auto;
	padding-top: 100px;
}

.row3
{
	float: right;
	width: 50%;
}

.img2
{
	float: left;
	width: 50%;
}

.title-as
{
    text-transform: uppercase;
	font-size: 24px;
}

.text-content p
{
    margin-top: 10px;
	font-size: 18px;
	line-height: 1.5;
}

.button-as
{
    margin-top: 30px;
}

.button-as a
{
    background-color: red;
	padding: 12px 20px;
	text-decoration: none;
	color:#fff;
	font-size: 18px;
	letter-spacing: 1.5px;
    border-radius: 10px;
}

.button-as a:hover
{
    background-color: rgb(146, 0, 0);
    transition: all 0.2s;
}

/* ------- SECTION MOBILE APP ------- */ 

.about1
{
    background-color: rgb(9, 9, 9);
    color: white;
    width: 100%;
    min-height: 65vh;
}

.row2
{
	float: left;
	width: 40%;
}

.img3
{
	float: right;
	width: 50%;
}

HTML kod: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CODER</title>
        <meta name="keywords" content="keywords">
        <meta name="description" content="description">
        <meta name="robots" content="all">
        <meta name="author" content="Bartosz Maciejewski">
        <meta name="generator" content="Visual Studio Code">

        <link rel="stylesheet" href="style/style.css">
        <link rel="shortcut icon" href="photo/logo-icon.png">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
    </head>
    <body>
        <!-------- PASEK MENU -------->
        <div class="main-bar">
            <nav>
                <input type="checkbox" id="check">
                <label for="check" class="checkbtn">
                    <span class="span1"></span>
                    <span class="span1"></span>
                    <span class="span1"></span>
                </label>
                <div class="logo-header">
                    <a href="index.html"><img src="photo/logo-coder.png" width="140" class="img1"></a>
                </div>
                <ol class="ol1">
                    <li class="li1" style="background-color: red;"><a href="onas.html"><b>O nas</b></a></li>
                    <li class="li1"><a href="blog.html"><b>Blog</b></a></li>
                    <li class="li1"><a href="projekty.html"><b>Projekty</b></a>
                        <ul class="ul1">
                            <li><a href="#"><b>Gry</b></a></li>
                            <li><a href="#"><b>Aplikacje</b></a></li>
                        </ul>
                    </li>
                    <li class="li1"><a href="sklep.html"><b>Sklep</b></a></li>
                    <li class="li1"><a href="kontakt.html"><b>Kontakt</b></a></li>
                    <li class="li1"><a href="logowanie.html"><b>Zaloguj</b></a></li>
                </ol>
            </nav>
        </div>
        <!-------- HEADER -------->
        <header class="header">
            <div class="main-baner">
                <div class="row5">
                    <div class="title-baner">
                        <h1>Witaj na naszej <br> stronie!</h1>
                    </div>
                    <div class="text-baner">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <br> eiusmod tempor incididunt ut labore et 
                            doloremagna aliqua. <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco <br> laboris nisi ut 
                            aliquip ex ea commodo consequat.</p>
                        <div class="button-as">
                            <a href="#">Zobacz &#8594;</a>
                        </div>
                    </div>
                </div>
                <div class="img0">
                    <img src="photo/human-baner.png" width="700">
                </div>
            </div>
        </header>
        <section class="about">
            <div class="container">
                <div class="row3">
                    <div class="title-as">
                        <h1>Kim jesteśmy ?</h1>
                    </div>
                    <div class="text-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. <br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat.</p>
                        <div class="button-as">
                            <a href="#">Sprawdź &#8594;</a>
                        </div>
                    </div>
                </div>
                <div class="img2">
                    <img src="photo/kim-jestesmy.jpg" width="550">
                </div>
            </div>
        </section>
        <section class="about1">
            <div class="container">
                <div class="img3">
                    <img src="photo/mobile-app.jpg" width="550">
                </div>
                <div class="row2">
                    <div class="title-as">
                        <h1>Nasze projekty</h1>
                    </div>
                    <div class="text-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. <br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat.</p>
                        <div class="button-as">
                            <a href="#">Sprawdź &#8594;</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="about">
            <div class="container">
                <div class="row3">
                    <div class="title-as">
                        <h1>Firmowy sklep</h1>
                    </div>
                    <div class="text-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. <br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat.</p>
                        <div class="button-as">
                            <a href="#">Sprawdź &#8594;</a>
                        </div>
                    </div>
                </div>
                <div class="img2">
                    <img src="photo/shops.jpg" width="550">
                </div>
            </div>
        </section>

 

Comments

w tutorialu który kopiujesz nie ma?
polecam system kolumn, lub grid/flex z bootstrapa

https://getbootstrap.com/docs/4.0/layout/grid/