@alex2k19

Не работает float, что делать?

Не работает, float, по идее он должен прижать картинку, к правому краю, а чет не работает, код и скрин ниже
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dart Service Manager</title>
	<link rel="stylesheet" href="css/style.css">
	<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
	<header>
		<div class="container">
			<div class="div-logo">
				<a href="index.html" style="text-decoration: none;"><img src="img/logo1.png" alt="logo">
				<img src="img/logo.png" alt="logo"></a>
			</div>
			<nav>
				<div class="div-button">
					<form action="" method="">
						<button class="sing_up">sign up</button>
					</form>
			    </div>
				<ul class="nav-ul">
					<li>
						<a href="#">Home</a>
					</li>
					<li>
						<a href="#" style="color: #061e37;">Service</a>
					</li>
					<li>
						<a href="#">Expension</a>
					</li>
					<li>
						<a href="#">Pricing</a>
					</li>
					<li>
						<a href="#">Help</a>
					</li>
				</ul>
			</nav>
				<div class="container-1">
					<p class="header-text-1">Lorem ipsum <br />dolor sit amet</p>
				 	<p class="header-text-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo<br /> ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis<br /> dis parturient montes, nascetur ridiculus mus</p>
				 	<form method="" action="" class="form1">
						<button class="buy">buy now</button>
						<button class="free">try for free</button>
					</form>
			  	</div>
			  	<div class="container-3">
			  		<img src="img/video1.png" alt="">
			  	</div>
			</div>
	</header>
</body>
</html>


*
{
	margin: 0;
	padding: 0;
}
body
{
	font-family: 'Raleway', sans-serif;
	margin: 0;
	padding: 0;
}
.container
{
	width: 1450px;
	margin: 0 auto;
}
header
{
	background: no-repeat center / cover;
	background-image: linear-gradient(to right, rgba(27, 232, 191, 0.7), rgba(16, 183, 205, 0.6)), url('../img/bg2.png');
	height: 750px;	
}
.div-logo
{
	float: left;
	margin-top: 41px;
}
nav
{
	text-align: center;
	padding-top: 64px;
}
.nav-ul
{
	
}
.nav-ul li
{
	display: inline;
	margin-right: 42px;
}
.nav-ul li a 
{
	text-decoration: none;
	color: #FFF;
	font-weight: bold;
	font-size: 15px;
}
.sing_up
{
	float: right;
}
header
{
	margin: 0;
	padding: 0;
}
.div-button
{
	padding-top: 0px;
}
.sing_up
{
	width: 80px;
	height: 25px;
	background-color: transparent;
	border-radius: 3px;
	border: 1px solid #FFF;
	color: #FFF;
	outline: none;
	padding: 0px;
}
.header-text-1
{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 55px;
	color: #FFF;
}
.container-1
{
	margin-top: 176px;
	float: left;
}
.header-text-2
{
	font-size: 18px;
	color: #FFF;
}
.form1
{
	margin-top: 44px;
}
.buy
{
	width: 143px;
	height: 50px;
	background-color: #061e37;
	color: #FFF;
	border: none;
	border-radius: 4px;
	text-transform: uppercase;
	margin-right: 30px;
}
.free
{
	width: 162px;
	height: 50px;
	color: #061e37;
	background-color: #FFF;
	border: none;
	border-radius: 4px;
	text-transform: uppercase;
	font-weight: bold;
}

.container-3
{
	float: right;
}

KQBM7bN.png
  • Вопрос задан
  • 213 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы