html - Divs not moving down within parent section -


here website current code: http://www.actuatecontent.com

i building first website , trying move down 2 divs within container div , won't budge down. (.copy , .btn_section )

what doing wrong, , how can correct it?

thanks help!

source code:

.second_section .container {  	position: relative;  	top: 300px;  	background-image: url(http://1.bp.blogspot.com/-i0jocwyqw94/udfz9u8si0i/aaaaaaaacrw/2hhb0xy7yzy/s1600/84.jpg);  	height: 900px;  	width: 100%;  }    .copy {  	top: 300px;  	width: 100%;  	text-align: center;  	color: white;  	font-family: 'josefin sans', sans-serif;  	letter-spacing: 2px    }    .btn_section {  	position: relative;  	top: 300px;  	text-align: center;  }    .btn {    	margin-top: 100px  	color: white;  	border: solid 2px fixed;  }    .btn_section {  	border: 1px solid white;  	padding: 20px 40px;  	text-decoration: none;  	background-color: #191919;  	color: white;  	font-family: 'open sans', sans-serif;  	font-size: 1.33em;  	letter-spacing: 2px;  	text-transform: uppercase;    }
<!doctype html>  <html>    <head>  <link type="text/css" rel="stylesheet" href="ac_css.css"/>  <link href='https://fonts.googleapis.com/css?family=open+sans:400,600'    rel='stylesheet' type='text/css'>  <link href='https://fonts.googleapis.com/css?family=raleway:500' rel='stylesheet' type='text/css'>  <link href='https://fonts.googleapis.com/css?family=josefin+sans' rel='stylesheet' type='text/css'>  </head>    <body>  <div class="header">    	<div class="nav">  	<ul>  		<li><a href="#">about</a></li>  		<li><a href="#">work</a></li>  		<li><a href="#">team</a></li>  		<li><a href="#">contact</a></li>  	</ul>  	</div>  </div>    <div class="second_section">  	<div class="container">  		<div class="copy">  		<h1>actuate content</h1>  			<br>  			<h3>expert content every business</h3>  		</div>  		<div class="btn_section">  			<a href="#" class="btn">write me!</a>    		</div>  	</div>    <div class="third_section">  	</div>    <div class="fourth_section">  	    	<div class="col">  		<a href="#"><img src="https://cdn0.iconfinder.com/data/icons/seo-smart-pack/128/grey_new_seo2-17-256.png"><h2>research</h2></a>  		  		<br>  		<p>our meticulous research methods uncover relevant information project. </p>  	</div>    	<div class="col">  		<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/icon_17-512.png">  		<h2>writing</h2></a>  		<br>  		<p>our seasoned, handpicked writers craft stellar content specific needs.</p>    	</div>    	<div class="col">  		<a href="#"><img src="http://i.imgur.com/aincaug.png">  		<h2>editing</h2></a>  		<br>  		<p>our editors work leading authors , publishers bring out best in writing.</p>  	</div>  	  </div>    <div class="footer">  	<div class="footer_info">  		<a href="#"><p>designed ashwin reddy / &copy;	ashwin reddy</p></a>    </div>  </body>    </html>

try adding padding-top .container class. eg:

.second_section .container {  padding-top:200px;          background-image: url(http://1.bp.blogspot.com/-i0jocwyqw94/udfz9u8si0i/aaaaaaaacrw/2hhb0xy7yzy/s1600/84.jpg);          height: 900px;          width: 100%;      }


Comments

Popular posts from this blog

java - Suppress Jboss version details from HTTP error response -

gridview - Yii2 DataPorivider $totalSum for a column -

Sass watch command compiles .scss files before full sftp upload -