Pierwsza strona HTML & CSS - opinie porady

pytanie zadane 7 maja 2019 w HTML i CSS przez Patrykg Nowicjusz (200 p.)

Witam !

Poniżej przedstawiam wam moją pierwszą stronę. Mam kilka pytań do was .

- Czy w kodzie są jakieś błędy które można zniwelować?

- Jak zrobić żeby cała strona była wyśrodkowana , ponieważ po oddaleniu na przeglądarce nie wygląda to za fajnie ?

<!doctype html>
<html lang="pl">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  
  <title></title>
  
  <meta name="description" content="">        
  <meta name="keywords" content="">
  
  <link rel="stylesheet" href="style.css" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800&amp;subset=latin-ext" rel="stylesheet">      
  </head>
  <link rel="stylesheet" href="css/fontello.css">
  
  <body>
    <nav>
      <div class="logo">
        <h4><a href="index.html">LOGO.</a></h4>  
      </div>
      <ul>
        <li class="active"><a href="index.html">Główna</a></li>
        <li><a href="index.html">Oferty</a></li>
        <li><a href="#">Sklep</a></li>
        <li><a href="#">Szukaj</a></li>
        <li><a href="#">Pomoc</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
      <div class="login">
        <input type="submit" value="Zaloguj się">
      </div>
      <div class="signin">
        <input type="submit" value="Zarejestruj się">
      </div>
    </nav>
    <main class="home">
        <header class="header1">
            <h1><span class="kwadratleft">.od dzisiaj -20% na wsz</span>ystkie produkty</h1>
            <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et euismod sapien,<br/>
            ut tincidunt lacus. Proin pharetra sem neque, vitae fringilla.</h4>
          </header>  
          <header class="header2">
            <h1>.od dzisiaj -20% n<span class="kwadratright">a wszystkie produkty</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et euismod sapien,<br/>
              ut tincidunt lacus. Proin pharetra sem neque, vitae fringilla.</p>
          </header>
    </main>
    <div class="arrow">
        <i class="icon-down-open"></i>
    </div>  
  </body>
</html>

body{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
}

nav{
	display: flex;
	align-items: center;
	max-height: 120px;
	font-weight: 800;
	position: relative;
	top: 27px;
	margin-left: auto;
	margin-right: auto;
}

.logo{
	position: relative;
	left: 250px;
}

.logo a{
	text-decoration: none;
	font-weight: 800;
	font-size: 30px;
	letter-spacing: 1px;
}

.logo a:visited{
	color: #000;
}

nav ul{
	display: flex;
	justify-content: space-around;
	width: 35%;
	list-style-type: none;
	position: relative;
	left: 300px;
}

nav ul a{
	text-decoration: none;
	color: #000;
	font-weight: 800;
	font-size: 14px;
}

nav ul a:hover{
	background-color: #FFF700;
	padding: 30px;
}

.login{
	position: relative;
	left: 33%;
}

.login input[type=submit]{
	font-size: 15px;
	color: #000;
	background-color: #fff;
	outline: none;
	border: none;
	font-weight: 800;
	font-family: 'Open Sans', sans-serif;
	transition: all 0.2s ease-in-out;
}

.login input[type=submit]:hover{
	-webkit-transform: scale(0.9);
	-ms-transform: scale(0.9);
	-webkit-transform: scale(0.9);
}

.signin{
	position: relative;
	left: 35%;
}

.signin input[type=submit]{
	font-size: 15px;
	color: #000;
	background-color: #FFF700;
	outline: none;
	border: none;
	font-weight: 800;
	font-family: 'Open Sans', sans-serif;
	padding: 18px 30px;
	border-radius: 60px;
	transition: all 0.2s ease-in-out;
}

.signin input[type=submit]:hover{
	-webkit-transform: scale(0.9);
	-ms-transform: scale(0.9);
	-webkit-transform: scale(0.9);
}

.header1{
	margin-top: 150px;
}

.header1 h1{
	font-weight: 800;
	font-size: 32px;
	letter-spacing: 1px;
	margin-left: 352px;
}

.header1 h4{
	font-weight: 700;
	color: #363535;
	margin-top: 30px;
	line-height: 40px;
	margin-left: 405px; 
}
.header2{
	margin-top: 120px;
}

.header2 h1{
	font-weight: 800;
	font-size: 32px;
	letter-spacing: 1px;
	margin-left: 950px;
}

.header2 p{
	font-weight: 700;
	color: #363535;
	margin-top: 30px;
	line-height: 40px;
	margin-left: 950px;
}

.kwadratleft{
	background-color: #FFF700;
	padding: 20px 0 20px 60px;
}

.kwadratright{
	background-color: #FFF700;
	padding: 20px 60px 20px 0px;
}

.arrow{
	background-color: #FFF700;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	width: 68px;
	height: 68px;
}

.home{
	margin-left: auto;
	margin-right: auto;
}