Something going wrong with my practice website

Hello guys!

I know all the basic knowledge and would like to practive, however everything goes unexpected…

I am trying to build this site with my own code:
https://www.eatapapaya.com/chippewa/

but I am getting this:

Can I insert code here?

HTML:

<!DOCTYPE html >

<html>

	<head>
		<meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">

        <title>BIOLIFE</title>
		<link rel="stylesheet" href="style.css">
		<link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet">
	</head>
	
	<body>
		<header id="header-logo">
			<h1>BIOLIFE</h1>
		</header>
		<section id="container">
			<div class="first-row">
			
				<div class="first-img">
					<img src="img/ab1-2.jpg" />
				</div>
				
				<div class="first-text">
					<h3>Lorem ipsum ut</h3>, at sem eget sapie mattis maecenas eu, diam arcu lectus congue justo lorem. Duis metus, mattis duis eros justo enim, ut arcu non nam bibendum. Eget auctor — donec arcu risus, ligula massa sem, maecenas sed vivamus porta nulla. Sem orci leo cursus enim quam justo curabitur tempus vulputate mattis elementum amet non magna nam. Quisque eget justo pharetra: amet metus sodales sagittis morbi risus enim morbi curabitur sagittis morbi. Pellentesque, tempus auctor ut diam at in risus eu sed ligula mattis nulla adipiscing bibendum ornare, pellentesque molestie quam, metus, integer fusce non sit nibh.
				</div>
				</div>
				<div class="second-row">
				
					<div class="second-text">
						<h3>Lorem ipsum ut</h3>, at sem eget sapien — at risus enim nulla orem. Duis metus, mattis duis eros justo enim, ut arcu non nam bibendum. Eget auctor — donec arcu risus, ligula massa sem, maecenas sed vivamus porta nulla. Sem orci leo cursus enim quam justo curabitur tempus vulputate mattis elementum amet non magna nam. Quisque eget justo pharetra: amet metus sodales sagittis morbi risus enim morbi curabitur sagittis morbi. Pellentesque, tempus auctor ut diam at in risus eu sed ligula mattis nulla adipiscing bibendum ornare, pellentesque molestie quam, metus, integer fusce non sit nibh.
					</div>
						
					<div class="second-img">
					<img src="img/ab1-3.jpg" />
					</div>
				</div>
				
					
				
			
		</section>
	</body>
</html>

CSS:

body {
	background-color:#F5F4F0;
}

#header-logo {
	width:90%;
	max-width:900px;
	margin:0 auto;
	text-align:center;
	font-size:35px;
}

#container {
	width:90%;
	max-width:900px;
	margin:0 auto 0 auto;
	margin-top:150px;
}

.first-img {
	width:50%;
	float:left;
	height:300px;
	margin-top:10%;
}

.first-img img {
	width:100%;
	max-width:400px;
}

.first-text {
	width:50%;
	font-size:20px;
	float:right;
}

.second-img {
	width:50%;
	float:right;
	margin-top:10%;
}

.second-row {
	width:100%;

}

.second-img img {
	width:100%;
	max-width:400px;
}

.second-text {
	width:48%;
	float:left;
	font-size:20px;
}
1 Like

You’re most of the way there. Put a clear: both whenever you start a row to ‘reset’ your floats and you should be fine.

1 Like

thanks buddy, I did not know that!