Question

请问我有什么帮助，我还很新。我正在尝试将第二部分标签向下移动到页面，但是它一直与另一部分重叠。

我正在尝试将其放置在自己的容器中，而主体背景不会与之重叠。任何帮助将不胜感激。

body {
	background: url(https://cdn.pixabay.com/photo/2018/03/31/23/08/water-3279564_1280.jpg);
	background-size: cover;
	background-position: center;
	text-align: center;
}

h1 {
	padding-top: 20%;
	padding-bottom: 40px;
}

h6 {
	padding-bottom: 20px;
}

#content {
	color: white;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="assets/css/oil.css">

    <title>Oil Rig</title>
  </head>
  <body>

<section>
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div id="content">
					<h1>Welcome to Oil Rig Company</h1>
					<h6>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</h6>
					<button class="btn btn-warning">About Us</button>
			</div>
		</div>
	</div>
</section>

<section class="about" id="about">
	<div class="container">
		<div class="row">
			<div class="col-lg-6">
				<img src="https://cdn.pixabay.com/photo/2012/04/13/14/34/oil-platform-32639_1280.png">
			</div>
			<div class="col-md-6">
					<h3>Our Mission</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing anim id est laborum.</p>
			</div>
		</div>
	</div>
</section>
  </body>
</html>

如何下移我的内容？该部分不断重叠

0 个答案: