Я довольно новичок в программировании менее чем за 6 месяцев и работаю над своим первым платным веб-сайтом, и я столкнулся с проблемой, которую я действительно не знаю, как исправить. Спасибо за помощь. Я уже пробовал устанавливать поля, но CSS сложно, поэтому, может быть, я делаю недостаточно, я действительно не уверен, как исправить
Вот как выглядит страница при уменьшении размера Вот как выглядит страница в обычном размере
.login-page{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.form{
position: relative;
z-index: 1;
background: rgba(0,0,0,0.5);
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
border-radius: 25px;
}
.header-logo{
width: 100%;
max-width: 300px;
height: auto;
}
.header{
text-align: right;
float: right
}
ul {
list-style-type: none;
margin: 15px;
padding: 0;
width: 300px;
background-color: rgba(160, 143, 70, 0.4);
font-family: "Roboto", sans-serif;
border-radius: 25px;
text-align: center;
font-size: 20px;
}
li a {
display: block;
color: #ffffff;
padding: 8px 16px;
text-decoration: none;
}
<body>
<div class="header">
<img src="header-logo.png" class="header-logo">
<ul>
<li><a href="#home">Home</a></li>
<br>
<li><a href="#news">Store</a></li>
<br>
<li><a href="#contact">Contact</a></li>
<br>
<li><a href="#about">About</a></li>
</ul>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<h1 class="register-header">Register</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Email">
<input type="text" placeholder="Password">
<button>Create</button>
<p class="message">Already Registered? <a href="#">Log-in</a></p>
</form>
<form class=:login-form>
<h1 class="login-header">Log-In</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
<button>Log-in</button>
<p class="message">Not Registered? <a href="#">Register</a></p>
</form>
</div>
</div>