SO this is my code and I have been trying to center my Div ( CONTAINER) but It sticks to the left side every time, i have tried using (align-content, and used flex on the body, but it doesn't solve the problem)
I used ( margin: 0 auto;) on the container and it does the trick but the container is still sticking to top
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");
body {
margin: 0;
padding: 0;
font-family: "karla", sans-serif;
background: lightblue;
}
.container {
width: 300px;
height: 800px;
border: 1px red solid;
background: white;
display: flex;
justify-content: center;
align-items: center;
}<!DOCTYPE html>
<html>
<head>
<title name="second_project">Project</title>
<meta charset="UTF-8">
<meta lang="en">
<link href="index.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
</head>
<body>
<div class="container">
<header>
<div class="main">
<h1 class="main_heading mainco">Join out community</h1>
<h2 class="sub_heading">30-day, hassle-free money back guarantee</h2>
<p class="main_content">Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills</p>
</div>
<main>
<section>
<div class="split">
<div>
<h1>Monthly Subscription</h1>
<span>$29<span>per month</span></span>
<h1>Full access for less than $1 a day</h1>
</div>
<div>
<button>Sign Up</button>
</div>
</div>
</section>
<section>
<div class="split">
<div>
<h1>Why us</h1>
</div>
<div>
<ul class="reasons">
<li class="items">Tutorials by industry experts.</li>
<li class="items">Peer & expert code review</li>
<li class="items">Coding exercises</li>
<li class="items">Access to our GitHub repos</li>
<li class="items">Community forum</li>
<li class="items">FlashCard decks</li>
<li class="items">New videos every week</li>
</ul>
</div>
</div>
</section>
</main>
</header>
</div>
</body>
</html>CodePudding user response：
And if you want to use flex, the flex css needs to be on the parent of the element you want to center like this:
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");
body {
display: flex;
flex-direction: row;
justify-content: center;
margin: 0;
padding: 0;
font-family: "karla", sans-serif;
background: lightblue;
}
.container {
width: 300px;
height: 800px;
border: 1px red solid;
background: white;
}<!DOCTYPE html>
<html>
<head>
<title name="second_project">Project</title>
<meta charset="UTF-8">
<meta lang="en">
<link href="index.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
</head>
<body>
<div class="container">
<header>
<div class="main">
<h1 class="main_heading mainco">Join out community</h1>
<h2 class="sub_heading">30-day, hassle-free money back guarantee</h2>
<p class="main_content">Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills</p>
</div>
<main>
<section>
<div class="split">
<div>
<h1>Monthly Subscription</h1>
<span>$29<span>per month</span></span>
<h1>Full access for less than $1 a day</h1>
</div>
<div>
<button>Sign Up</button>
</div>
</div>
</section>
<section>
<div class="split">
<div>
<h1>Why us</h1>
</div>
<div>
<ul class="reasons">
<li class="items">Tutorials by industry experts.</li>
<li class="items">Peer & expert code review</li>
<li class="items">Coding exercises</li>
<li class="items">Access to our GitHub repos</li>
<li class="items">Community forum</li>
<li class="items">FlashCard decks</li>
<li class="items">New videos every week</li>
</ul>
</div>
</div>
</section>
</main>
</header>
</div>
</body>
</html>CodePudding user response：
just add margin: 0 auto; to .container. It works fine.
.container {
margin: 0 auto;
}
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");
body {
margin: 0;
padding: 0;
font-family: "karla", sans-serif;
background: lightblue;
}
.container {
width: 300px;
height: 800px;
border: 1px red solid;
background: white;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}<div class="container">
<header>
<div class="main">
<h1 class="main_heading mainco">Join out community</h1>
<h2 class="sub_heading">30-day, hassle-free money back guarantee</h2>
<p class="main_content">Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills</p>
</div>
<main>
<section>
<div class="split">
<div>
<h1>Monthly Subscription</h1>
<span>$29<span>per month</span></span>
<h1>Full access for less than $1 a day</h1>
</div>
<div>
<button>Sign Up</button>
</div>
</div>
</section>
<section>
<div class="split">
<div>
<h1>Why us</h1>
</div>
<div>
<ul class="reasons">
<li class="items">Tutorials by industry experts.</li>
<li class="items">Peer & expert code review</li>
<li class="items">Coding exercises</li>
<li class="items">Access to our GitHub repos</li>
<li class="items">Community forum</li>
<li class="items">FlashCard decks</li>
<li class="items">New videos every week</li>
</ul>
</div>
</div>
</section>
</main>
</header>
</div>
</html>CodePudding user response：
Hope I understood correctly what you wanted, take a look at this CSS:
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");
* {
margin: 0;
padding: 0;
}
body {
font-family: "karla", sans-serif;
background: lightblue;
/*Look here*/
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
/*margin: 0 auto; This would be an alternative way of centering it horizontally*/
border: 1px red solid;
background: white;
}CodePudding user response：
A common and very easy option would be to work with margin: auto; in your container style.
Like that:
body {
margin: 0;
padding: 0;
font-family: "karla", sans-serif;
background: lightblue;
}
.container {
width: 300px;
height: 800px;
border: 1px red solid;
background: white;
margin: auto;
}<!DOCTYPE html>
<html>
<head>
<title name="second_project">Project</title>
<meta charset="UTF-8">
<meta lang="en">
<link href="index.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
</head>
<body>
<div class="container">
<header>
<div class="main">
<h1 class="main_heading mainco">Join out community</h1>
<h2 class="sub_heading">30-day, hassle-free money back guarantee</h2>
<p class="main_content">Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills</p>
</div>
<main>
<section>
<div class="split">
<div>
<h1>Monthly Subscription</h1>
<span>$29<span>per month</span></span>
<h1>Full access for less than $1 a day</h1>
</div>
<div>
<button>Sign Up</button>
</div>
</div>
</section>
<section>
<div class="split">
<div>
<h1>Why us</h1>
</div>
<div>
<ul class="reasons">
<li class="items">Tutorials by industry experts.</li>
<li class="items">Peer & expert code review</li>
<li class="items">Coding exercises</li>
<li class="items">Access to our GitHub repos</li>
<li class="items">Community forum</li>
<li class="items">FlashCard decks</li>
<li class="items">New videos every week</li>
</ul>
</div>
</div>
</section>
</main>
</header>
</div>
</body>
</html>CodePudding user response：
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");
body {
margin: 0;
padding: 0;
font-family: "karla", sans-serif;
background: lightblue;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container header {
width: 300px;
height: 800px;
border: 1px red solid;
background: white;
}<!DOCTYPE html>
<html>
<head>
<title name="second_project">Project</title>
<meta charset="UTF-8">
<meta lang="en">
<link href="index.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
</head>
<body>
<div class="container">
<header>
<div class="main">
<h1 class="main_heading mainco">Join out community</h1>
<h2 class="sub_heading">30-day, hassle-free money back guarantee</h2>
<p class="main_content">Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills</p>
</div>
<main>
<section>
<div class="split">
<div>
<h1>Monthly Subscription</h1>
<span>$29<span>per month</span></span>
<h1>Full access for less than $1 a day</h1>
</div>
<div>
<button>Sign Up</button>
</div>
</div>
</section>
<section>
<div class="split">
<div>
<h1>Why us</h1>
</div>
<div>
<ul class="reasons">
<li class="items">Tutorials by industry experts.</li>
<li class="items">Peer & expert code review</li>
<li class="items">Coding exercises</li>
<li class="items">Access to our GitHub repos</li>
<li class="items">Community forum</li>
<li class="items">FlashCard decks</li>
<li class="items">New videos every week</li>
</ul>
</div>
</div>
</section>
</main>
</header>
</div>
</body>
</html>