css positioning i am having a problem with positioning

i am new to web development, I have a small problem with positioning i placed a

element with content in it all of the word are grumble up instead of be in one line . can anyone help me with a solution. positioning has been a big problem for me so far so if you guys know any sources where i can learn more about css positioning

@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');

@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

@import url('https://fonts.googleapis.com/css?family=Poiret+One');



html, body {

	margin: 0;

	padding: 0;

	height: 100%;

	width: 100%;

}

.intro {

	height: 100%;

	width: 100%;

	margin: auto;

	display: table;

	top: 0;

	background-size: cover;

	background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;

}

.intro .inner{

	display: table-cell;

	vertical-align: middle;

	width: 100%;

	max-width: none;

}

.content {

	max-width: 600px;

	margin: 0 auto;

	text-align: center;

}

.content h1 {

	font-family: "Yantramana";

	font-size: 600%;

	font-weight: 100;

	color: #E1EFE9;

	line-height: 70%;

}

.btn{

	font-family: "montserrat";

	font-size: 135%;

	font-weight: 400;

	color: orange;

	text-transform: uppercase;

	text-decoration: none;

	border: solid #ffffff;

	padding: 10px 20px;

	border-radius: 9px;

	transition: all 0.7s;

}

.btn:hover {

	color: #CBDFD6;

	border: solid #CBDFD6;



}

.about-us{

	height:100%;

	width: 100%;

	margin: auto;

	display: table;

	background-color: #ffffff;

	background-size: cover;

	position: relative;

}

.ab-content {

	font-family: "Poiret One";

	font-weight: lighter;

	position: absolute;

	font-size: 150%;

	left: 50%;

	transform: translateX(-50%);

}

.ab-p{

	position: absolute;

	top: 10%;

	left: 50%;

	font-weight: lighter;

	transform: translateX(-50%);

	font-family: "montserrat";

}



.color {

	color:orange;

}

/*--- Media Queries --*/

@media screen and (max-width: 900px) {



}

@media screen and (max-width: 768px) {



}

@media screen and (max-width: 480px) {

	

}

<!DOCTYPE html>

<html>    

<head>

	<title>Full Screen Landing Page</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

	<link href="css/animate.css" rel="stylesheet"/>

	<link href="css/waypoints.css" rel="stylesheet"/>

	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>

	<script src="js/waypoints.js" type="text/javascript"></script>

</head>

<body>

	<section class="intro">

		<div class="inner">

			<div class="content">

				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">

					<h1>Find <span class="color">Your</span> Taste!</h1>

				</section>

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<a class="btn" href="#">Get Started</a>

			</div>

		</div>

	</section>

	<section class="about-us">

		<div class="ab-inner">

			<div class="ab-content">

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<h2 class="center">Our Mission</h2>

					<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">

						<p class="ab-p">Our mission is to provide the best food ingedients.</p>

			</div>

		</div>

	</section>

</body>

</html>

edited Nov 20 '18 at 23:20

jeanpaulxiao

1635

asked Nov 20 '18 at 19:39

Ross Linton

123

1

Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line

– Julian Espinosa
Nov 20 '18 at 19:44

2

You should read about position: absolute and what it actually does. It is almost certainly the wrong thing to be using here.

– Turnip
Nov 20 '18 at 19:47

add a comment |

i am new to web development, I have a small problem with positioning i placed a

@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');

@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

@import url('https://fonts.googleapis.com/css?family=Poiret+One');



html, body {

	margin: 0;

	padding: 0;

	height: 100%;

	width: 100%;

}

.intro {

	height: 100%;

	width: 100%;

	margin: auto;

	display: table;

	top: 0;

	background-size: cover;

	background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;

}

.intro .inner{

	display: table-cell;

	vertical-align: middle;

	width: 100%;

	max-width: none;

}

.content {

	max-width: 600px;

	margin: 0 auto;

	text-align: center;

}

.content h1 {

	font-family: "Yantramana";

	font-size: 600%;

	font-weight: 100;

	color: #E1EFE9;

	line-height: 70%;

}

.btn{

	font-family: "montserrat";

	font-size: 135%;

	font-weight: 400;

	color: orange;

	text-transform: uppercase;

	text-decoration: none;

	border: solid #ffffff;

	padding: 10px 20px;

	border-radius: 9px;

	transition: all 0.7s;

}

.btn:hover {

	color: #CBDFD6;

	border: solid #CBDFD6;



}

.about-us{

	height:100%;

	width: 100%;

	margin: auto;

	display: table;

	background-color: #ffffff;

	background-size: cover;

	position: relative;

}

.ab-content {

	font-family: "Poiret One";

	font-weight: lighter;

	position: absolute;

	font-size: 150%;

	left: 50%;

	transform: translateX(-50%);

}

.ab-p{

	position: absolute;

	top: 10%;

	left: 50%;

	font-weight: lighter;

	transform: translateX(-50%);

	font-family: "montserrat";

}



.color {

	color:orange;

}

/*--- Media Queries --*/

@media screen and (max-width: 900px) {



}

@media screen and (max-width: 768px) {



}

@media screen and (max-width: 480px) {

	

}

<!DOCTYPE html>

<html>    

<head>

	<title>Full Screen Landing Page</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

	<link href="css/animate.css" rel="stylesheet"/>

	<link href="css/waypoints.css" rel="stylesheet"/>

	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>

	<script src="js/waypoints.js" type="text/javascript"></script>

</head>

<body>

	<section class="intro">

		<div class="inner">

			<div class="content">

				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">

					<h1>Find <span class="color">Your</span> Taste!</h1>

				</section>

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<a class="btn" href="#">Get Started</a>

			</div>

		</div>

	</section>

	<section class="about-us">

		<div class="ab-inner">

			<div class="ab-content">

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<h2 class="center">Our Mission</h2>

					<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">

						<p class="ab-p">Our mission is to provide the best food ingedients.</p>

			</div>

		</div>

	</section>

</body>

</html>

edited Nov 20 '18 at 23:20

jeanpaulxiao

1635

asked Nov 20 '18 at 19:39

Ross Linton

123

1

Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line

– Julian Espinosa
Nov 20 '18 at 19:44

2

You should read about position: absolute and what it actually does. It is almost certainly the wrong thing to be using here.

– Turnip
Nov 20 '18 at 19:47

add a comment |

i am new to web development, I have a small problem with positioning i placed a

@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');

@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

@import url('https://fonts.googleapis.com/css?family=Poiret+One');



html, body {

	margin: 0;

	padding: 0;

	height: 100%;

	width: 100%;

}

.intro {

	height: 100%;

	width: 100%;

	margin: auto;

	display: table;

	top: 0;

	background-size: cover;

	background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;

}

.intro .inner{

	display: table-cell;

	vertical-align: middle;

	width: 100%;

	max-width: none;

}

.content {

	max-width: 600px;

	margin: 0 auto;

	text-align: center;

}

.content h1 {

	font-family: "Yantramana";

	font-size: 600%;

	font-weight: 100;

	color: #E1EFE9;

	line-height: 70%;

}

.btn{

	font-family: "montserrat";

	font-size: 135%;

	font-weight: 400;

	color: orange;

	text-transform: uppercase;

	text-decoration: none;

	border: solid #ffffff;

	padding: 10px 20px;

	border-radius: 9px;

	transition: all 0.7s;

}

.btn:hover {

	color: #CBDFD6;

	border: solid #CBDFD6;



}

.about-us{

	height:100%;

	width: 100%;

	margin: auto;

	display: table;

	background-color: #ffffff;

	background-size: cover;

	position: relative;

}

.ab-content {

	font-family: "Poiret One";

	font-weight: lighter;

	position: absolute;

	font-size: 150%;

	left: 50%;

	transform: translateX(-50%);

}

.ab-p{

	position: absolute;

	top: 10%;

	left: 50%;

	font-weight: lighter;

	transform: translateX(-50%);

	font-family: "montserrat";

}



.color {

	color:orange;

}

/*--- Media Queries --*/

@media screen and (max-width: 900px) {



}

@media screen and (max-width: 768px) {



}

@media screen and (max-width: 480px) {

	

}

<!DOCTYPE html>

<html>    

<head>

	<title>Full Screen Landing Page</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

	<link href="css/animate.css" rel="stylesheet"/>

	<link href="css/waypoints.css" rel="stylesheet"/>

	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>

	<script src="js/waypoints.js" type="text/javascript"></script>

</head>

<body>

	<section class="intro">

		<div class="inner">

			<div class="content">

				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">

					<h1>Find <span class="color">Your</span> Taste!</h1>

				</section>

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<a class="btn" href="#">Get Started</a>

			</div>

		</div>

	</section>

	<section class="about-us">

		<div class="ab-inner">

			<div class="ab-content">

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<h2 class="center">Our Mission</h2>

					<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">

						<p class="ab-p">Our mission is to provide the best food ingedients.</p>

			</div>

		</div>

	</section>

</body>

</html>

edited Nov 20 '18 at 23:20

jeanpaulxiao

1635

asked Nov 20 '18 at 19:39

Ross Linton

123

i am new to web development, I have a small problem with positioning i placed a

@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');

@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

@import url('https://fonts.googleapis.com/css?family=Poiret+One');



html, body {

	margin: 0;

	padding: 0;

	height: 100%;

	width: 100%;

}

.intro {

	height: 100%;

	width: 100%;

	margin: auto;

	display: table;

	top: 0;

	background-size: cover;

	background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;

}

.intro .inner{

	display: table-cell;

	vertical-align: middle;

	width: 100%;

	max-width: none;

}

.content {

	max-width: 600px;

	margin: 0 auto;

	text-align: center;

}

.content h1 {

	font-family: "Yantramana";

	font-size: 600%;

	font-weight: 100;

	color: #E1EFE9;

	line-height: 70%;

}

.btn{

	font-family: "montserrat";

	font-size: 135%;

	font-weight: 400;

	color: orange;

	text-transform: uppercase;

	text-decoration: none;

	border: solid #ffffff;

	padding: 10px 20px;

	border-radius: 9px;

	transition: all 0.7s;

}

.btn:hover {

	color: #CBDFD6;

	border: solid #CBDFD6;



}

.about-us{

	height:100%;

	width: 100%;

	margin: auto;

	display: table;

	background-color: #ffffff;

	background-size: cover;

	position: relative;

}

.ab-content {

	font-family: "Poiret One";

	font-weight: lighter;

	position: absolute;

	font-size: 150%;

	left: 50%;

	transform: translateX(-50%);

}

.ab-p{

	position: absolute;

	top: 10%;

	left: 50%;

	font-weight: lighter;

	transform: translateX(-50%);

	font-family: "montserrat";

}



.color {

	color:orange;

}

/*--- Media Queries --*/

@media screen and (max-width: 900px) {



}

@media screen and (max-width: 768px) {



}

@media screen and (max-width: 480px) {

	

}

<!DOCTYPE html>

<html>    

<head>

	<title>Full Screen Landing Page</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

	<link href="css/animate.css" rel="stylesheet"/>

	<link href="css/waypoints.css" rel="stylesheet"/>

	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>

	<script src="js/waypoints.js" type="text/javascript"></script>

</head>

<body>

	<section class="intro">

		<div class="inner">

			<div class="content">

				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">

					<h1>Find <span class="color">Your</span> Taste!</h1>

				</section>

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<a class="btn" href="#">Get Started</a>

			</div>

		</div>

	</section>

	<section class="about-us">

		<div class="ab-inner">

			<div class="ab-content">

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<h2 class="center">Our Mission</h2>

					<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">

						<p class="ab-p">Our mission is to provide the best food ingedients.</p>

			</div>

		</div>

	</section>

</body>

</html>

@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');

@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

@import url('https://fonts.googleapis.com/css?family=Poiret+One');



html, body {

	margin: 0;

	padding: 0;

	height: 100%;

	width: 100%;

}

.intro {

	height: 100%;

	width: 100%;

	margin: auto;

	display: table;

	top: 0;

	background-size: cover;

	background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;

}

.intro .inner{

	display: table-cell;

	vertical-align: middle;

	width: 100%;

	max-width: none;

}

.content {

	max-width: 600px;

	margin: 0 auto;

	text-align: center;

}

.content h1 {

	font-family: "Yantramana";

	font-size: 600%;

	font-weight: 100;

	color: #E1EFE9;

	line-height: 70%;

}

.btn{

	font-family: "montserrat";

	font-size: 135%;

	font-weight: 400;

	color: orange;

	text-transform: uppercase;

	text-decoration: none;

	border: solid #ffffff;

	padding: 10px 20px;

	border-radius: 9px;

	transition: all 0.7s;

}

.btn:hover {

	color: #CBDFD6;

	border: solid #CBDFD6;



}

.about-us{

	height:100%;

	width: 100%;

	margin: auto;

	display: table;

	background-color: #ffffff;

	background-size: cover;

	position: relative;

}

.ab-content {

	font-family: "Poiret One";

	font-weight: lighter;

	position: absolute;

	font-size: 150%;

	left: 50%;

	transform: translateX(-50%);

}

.ab-p{

	position: absolute;

	top: 10%;

	left: 50%;

	font-weight: lighter;

	transform: translateX(-50%);

	font-family: "montserrat";

}



.color {

	color:orange;

}

/*--- Media Queries --*/

@media screen and (max-width: 900px) {



}

@media screen and (max-width: 768px) {



}

@media screen and (max-width: 480px) {

	

}

<!DOCTYPE html>

<html>    

<head>

	<title>Full Screen Landing Page</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

	<link href="css/animate.css" rel="stylesheet"/>

	<link href="css/waypoints.css" rel="stylesheet"/>

	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>

	<script src="js/waypoints.js" type="text/javascript"></script>

</head>

<body>

	<section class="intro">

		<div class="inner">

			<div class="content">

				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">

					<h1>Find <span class="color">Your</span> Taste!</h1>

				</section>

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<a class="btn" href="#">Get Started</a>

			</div>

		</div>

	</section>

	<section class="about-us">

		<div class="ab-inner">

			<div class="ab-content">

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<h2 class="center">Our Mission</h2>

					<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">

						<p class="ab-p">Our mission is to provide the best food ingedients.</p>

			</div>

		</div>

	</section>

</body>

</html>

@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');

@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

@import url('https://fonts.googleapis.com/css?family=Poiret+One');



html, body {

	margin: 0;

	padding: 0;

	height: 100%;

	width: 100%;

}

.intro {

	height: 100%;

	width: 100%;

	margin: auto;

	display: table;

	top: 0;

	background-size: cover;

	background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;

}

.intro .inner{

	display: table-cell;

	vertical-align: middle;

	width: 100%;

	max-width: none;

}

.content {

	max-width: 600px;

	margin: 0 auto;

	text-align: center;

}

.content h1 {

	font-family: "Yantramana";

	font-size: 600%;

	font-weight: 100;

	color: #E1EFE9;

	line-height: 70%;

}

.btn{

	font-family: "montserrat";

	font-size: 135%;

	font-weight: 400;

	color: orange;

	text-transform: uppercase;

	text-decoration: none;

	border: solid #ffffff;

	padding: 10px 20px;

	border-radius: 9px;

	transition: all 0.7s;

}

.btn:hover {

	color: #CBDFD6;

	border: solid #CBDFD6;



}

.about-us{

	height:100%;

	width: 100%;

	margin: auto;

	display: table;

	background-color: #ffffff;

	background-size: cover;

	position: relative;

}

.ab-content {

	font-family: "Poiret One";

	font-weight: lighter;

	position: absolute;

	font-size: 150%;

	left: 50%;

	transform: translateX(-50%);

}

.ab-p{

	position: absolute;

	top: 10%;

	left: 50%;

	font-weight: lighter;

	transform: translateX(-50%);

	font-family: "montserrat";

}



.color {

	color:orange;

}

/*--- Media Queries --*/

@media screen and (max-width: 900px) {



}

@media screen and (max-width: 768px) {



}

@media screen and (max-width: 480px) {

	

}

<!DOCTYPE html>

<html>    

<head>

	<title>Full Screen Landing Page</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

	<link href="css/animate.css" rel="stylesheet"/>

	<link href="css/waypoints.css" rel="stylesheet"/>

	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>

	<script src="js/waypoints.js" type="text/javascript"></script>

</head>

<body>

	<section class="intro">

		<div class="inner">

			<div class="content">

				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">

					<h1>Find <span class="color">Your</span> Taste!</h1>

				</section>

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<a class="btn" href="#">Get Started</a>

			</div>

		</div>

	</section>

	<section class="about-us">

		<div class="ab-inner">

			<div class="ab-content">

				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">

					<h2 class="center">Our Mission</h2>

					<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">

						<p class="ab-p">Our mission is to provide the best food ingedients.</p>

			</div>

		</div>

	</section>

</body>

</html>

javascript html css

edited Nov 20 '18 at 23:20

jeanpaulxiao

1635

asked Nov 20 '18 at 19:39

Ross Linton

123

edited Nov 20 '18 at 23:20

jeanpaulxiao

1635

asked Nov 20 '18 at 19:39

Ross Linton

123

edited Nov 20 '18 at 23:20

jeanpaulxiao

1635

edited Nov 20 '18 at 23:20

jeanpaulxiao

1635

edited Nov 20 '18 at 23:20

jeanpaulxiao

1635

asked Nov 20 '18 at 19:39

Ross Linton

123

asked Nov 20 '18 at 19:39

Ross Linton

123

asked Nov 20 '18 at 19:39

Ross Linton

123

1

Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line

– Julian Espinosa
Nov 20 '18 at 19:44

2

You should read about position: absolute and what it actually does. It is almost certainly the wrong thing to be using here.

– Turnip
Nov 20 '18 at 19:47

add a comment |

1

Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line

– Julian Espinosa
Nov 20 '18 at 19:44

2

You should read about position: absolute and what it actually does. It is almost certainly the wrong thing to be using here.

– Turnip
Nov 20 '18 at 19:47

Your content class is 600px in width and the text and font size of your text is big therefore it will break into a new line if the content is bigger than the width. Increase the width or reduce the font size and the text will be in a single line

– Julian Espinosa
Nov 20 '18 at 19:44

You should read about position: absolute and what it actually does. It is almost certainly the wrong thing to be using here.

– Turnip
Nov 20 '18 at 19:47

add a comment |

2 Answers
2

active

oldest

votes

I assume you would like the "Our Mission" section to be centered and readable.

.ab-p {

    font-weight: lighter;

    font-family: "montserrat";

    text-align: center;

}



h2 {

    text-align: center;

}

Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.

answered Nov 20 '18 at 19:53

jeanpaulxiao

1635

1

it worked thank you for your suggestion.

– Ross Linton
Nov 20 '18 at 20:27

add a comment |

"Relative" "position" relates positions, so this can avoid mess.

.ab-content {

    font-family: "Poiret One";

    font-weight: lighter;

    position: relative;

    font-size: 150%;

    left: 50%;

    transform: translateX(-50%);

   }

answered Nov 20 '18 at 20:03

Ehsan

111

w3school position property

– Ehsan
Nov 20 '18 at 20:05

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400360%2fcss-positioning-i-am-having-a-problem-with-positioning%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

I assume you would like the "Our Mission" section to be centered and readable.

.ab-p {

    font-weight: lighter;

    font-family: "montserrat";

    text-align: center;

}



h2 {

    text-align: center;

}

answered Nov 20 '18 at 19:53

jeanpaulxiao

1635

1

it worked thank you for your suggestion.

– Ross Linton
Nov 20 '18 at 20:27

add a comment |

I assume you would like the "Our Mission" section to be centered and readable.

.ab-p {

    font-weight: lighter;

    font-family: "montserrat";

    text-align: center;

}



h2 {

    text-align: center;

}

answered Nov 20 '18 at 19:53

jeanpaulxiao

1635

1

it worked thank you for your suggestion.

– Ross Linton
Nov 20 '18 at 20:27

add a comment |

I assume you would like the "Our Mission" section to be centered and readable.

.ab-p {

    font-weight: lighter;

    font-family: "montserrat";

    text-align: center;

}



h2 {

    text-align: center;

}

answered Nov 20 '18 at 19:53

jeanpaulxiao

1635

I assume you would like the "Our Mission" section to be centered and readable.

.ab-p {

    font-weight: lighter;

    font-family: "montserrat";

    text-align: center;

}



h2 {

    text-align: center;

}

answered Nov 20 '18 at 19:53

jeanpaulxiao

1635

answered Nov 20 '18 at 19:53

jeanpaulxiao

1635

answered Nov 20 '18 at 19:53

jeanpaulxiao

1635

answered Nov 20 '18 at 19:53

jeanpaulxiao

1635

1

it worked thank you for your suggestion.

– Ross Linton
Nov 20 '18 at 20:27

add a comment |

1

it worked thank you for your suggestion.

– Ross Linton
Nov 20 '18 at 20:27

it worked thank you for your suggestion.

– Ross Linton
Nov 20 '18 at 20:27

add a comment |

"Relative" "position" relates positions, so this can avoid mess.

.ab-content {

    font-family: "Poiret One";

    font-weight: lighter;

    position: relative;

    font-size: 150%;

    left: 50%;

    transform: translateX(-50%);

   }

answered Nov 20 '18 at 20:03

Ehsan

111

w3school position property

– Ehsan
Nov 20 '18 at 20:05

add a comment |

"Relative" "position" relates positions, so this can avoid mess.

.ab-content {

    font-family: "Poiret One";

    font-weight: lighter;

    position: relative;

    font-size: 150%;

    left: 50%;

    transform: translateX(-50%);

   }

answered Nov 20 '18 at 20:03

Ehsan

111

w3school position property

– Ehsan
Nov 20 '18 at 20:05

add a comment |

"Relative" "position" relates positions, so this can avoid mess.

.ab-content {

    font-family: "Poiret One";

    font-weight: lighter;

    position: relative;

    font-size: 150%;

    left: 50%;

    transform: translateX(-50%);

   }

answered Nov 20 '18 at 20:03

Ehsan

111

"Relative" "position" relates positions, so this can avoid mess.

.ab-content {

    font-family: "Poiret One";

    font-weight: lighter;

    position: relative;

    font-size: 150%;

    left: 50%;

    transform: translateX(-50%);

   }

answered Nov 20 '18 at 20:03

Ehsan

111

answered Nov 20 '18 at 20:03

Ehsan

111

answered Nov 20 '18 at 20:03

Ehsan

111

answered Nov 20 '18 at 20:03

Ehsan

111

w3school position property

– Ehsan
Nov 20 '18 at 20:05

add a comment |

w3school position property

– Ehsan
Nov 20 '18 at 20:05

w3school position property

– Ehsan
Nov 20 '18 at 20:05

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky