Float doesn't work, what should I do?

  • 0
    It does not work, float, in theory it should press the picture to the right, but even does not work, the code and screen are below
    <!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;
    }

    CSS Anonymous, Feb 9, 2020

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!