This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
How to remove margin space around body or clear default css styles
(7 answers)
How can I get rid of margin around my HTML content?
(5 answers)
Closed 3 years ago.
I ran into this problem while learning CSS. I tried to search for this but couldn't find any proper answers. Some lead me to margin collapsing, but it just doesn't happen to horizontal margins.
#nav-bar {
position: fixed;
top: 0px;
left: 0px;
height: 60px;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #be3144;
}
#nav-list {
display: flex;
margin-right: 4rem;
}
.nav-link {
text-decoration: none;
color: white;
padding: 0 1.6rem 0 1.6rem;
height: 60px;
weight: 100%;
display: flex;
align-items: center;
font-size: 1.3rem;
}
#welcome-section {
background-color: #3a3d40;
height: 100vh;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
margin-top: 60px;
}
<nav id="nav-bar">
<div id="nav-list">
About
Work
Contact
</div>
</nav>
<section id="welcome-section">
<h1>Hey I am Mimic</h1>
<h4>a web developer</h4>
</section>
The #welcome-section below nav-bar has blank space both left and right sides, though I didn't set any margin properties.
Also, any advices and suggestions in styling HTML/CSS are appreciated. Thanks in advance.
It's because the <body> of the page has margin as default.
Get rid of that by adding the below, and it should work...
body {
margin:0;
}
body {
margin:0;
}
#nav-bar {
position: fixed;
top: 0px;
left: 0px;
height: 60px;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #be3144;
}
#nav-list {
display: flex;
margin-right: 4rem;
}
.nav-link {
text-decoration: none;
color: white;
padding: 0 1.6rem 0 1.6rem;
height: 60px;
weight: 100%;
display: flex;
align-items: center;
font-size: 1.3rem;
}
#welcome-section {
background-color: #3a3d40;
height: 100vh;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
margin-top: 60px;
}
<nav id="nav-bar">
<div id="nav-list">
About
Work
Contact
</div>
</nav>
<section id="welcome-section">
<h1>Hey I am Mimic</h1>
<h4>a web developer</h4>
</section>
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How to center a button within a div?
(16 answers)
Closed 5 months ago.
I have the following code in index.html
h1 {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
#count-el {
font-size: 50px;
display: flex;
justify-content: center;
}
#increment-btn {
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
}
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>
Flex works in all elements except for the <button> element. It doesn't center it. Why is that?
Most browsers display button elements as inline-block by default, so, it won't occupy 100% of parent's width. If you apply width 100% it will center the text, just like h1, h2. If you want to center the button itself you can use margin: 0 auto; property.
h1 {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
#count-el {
font-size: 50px;
display: flex;
justify-content: center;
}
#increment-btn {
width: 100%;
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
}
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>
add to your button class margin-left: auto; margin-right:auto;
should look like that
#increment-btn {
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
For your problem you need to read this article:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You should add
margin: auto;
display: block;
to #increment-btn style.
Other solution is to add a div parent element to the button and add flex style there:
display: flex;
justify-content: center;
I made a codepen for you: https://codepen.io/kovtib/pen/vYjgXrP
h1 {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
#count-el {
font-size: 50px;
display: flex;
justify-content: center;
}
#increment-btn {
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
margin-inline: auto;
}
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>
Add margin-inline: auto to your button styles.
I am trying to make it so the second section or the first section will align center with the top.
What I don't understand is the relationship between items with display flex vs items that have display block.
First Question: Is there a way with flex so the top logo doesn't look "off" center compared to the centered text in the second section?
Link To Pen: https://codepen.io/skella1/pen/vYZLdVN
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
Center the image using justify-content: center on the flex parent element and then set the P elements position to absolute and position it using the top/right properties.
Right now you have two elements that are taking up space in the flex parent elements width. The image and the P tags content. Using justify-content: space-between will place the remainder of the width the elements do not use, between them. In turn skewing the look of the image from being in the center regardless of your margin set to 0 auto, as that only places it in the center of the space it takes up from the parent.
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.header p {
position: absolute;
top: 0;
right: 20px;
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
}
.secHeader h1 {
text-transform: uppercase;
font-weight: 900;
}
.content {
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.content .login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
Answer to Question 1) A really quick fix to this was using the transform property in CSS to center the image with respect to the current position
Answer to Question 2) Simply set the max-width property on the .content class to prevent the scrolling you talked about
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
width:100%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
transform:translate(50%,0%); /* MODIFIED CODE HERE */
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
height: 100vh;
max-width:100vw; /* MODIFIED CODE HERE */
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
If you're insisting on using flexbox for the header, what you can do is the following:
<div class="header">
<div>
</div>
<div class="text-center">
<img src="https://via.placeholder.com/100x50" alt="">
</div>
<div class="text-right">
<p>Text Goes Here</p>
</div>
</div>
.header {
height: 50px;
display:flex;
padding: 0px;
justify-content: space-between;
div {
flex:1;
}
div.text-center {
text-align:center;
}
div.text-right{
text-align:right;
}
}
Please note that this is just a workaround, flexbox is not the only solution here. You might use position:absolute for this.
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I have div with h3 and button inside of it, and my div has display:flex; with justify-content:center; align-items:center; and when i insert these propeties, my button sticks on the right side of the h3 i tried creating div and putting button in it, but that just breakes the view
So question is, how do i put button under h3? Do i have missing flex properties?
.tittle-block {
display: flex;
justify-content: center;
align-items: center;
background: url(../img/background.png) 0% no-repeat;
padding: 0;
min-height: 495px;
}
.tittle {
text-align: center;
width: 555px;
color: #fff;
font-size: 42px;
margin: 0;
}
.button {
display: flex;
justify-content: center;
align-items: center;
flex-direction: wrap;
border: 1px solid white;
border-radius: 5px;
background: none;
color: #fff;
font-size: 25px;
}
<div class="tittle-block">
<h3 class="tittle">Text here</h3>
<button type="button" class="button">View more</button>
</div>
All you need to do is add flex-direction: column.
But, first, you've a syntax error:
<div class="tittle-block> , you need to close the class tag, like this <div class="tittle-block">
.tittle-block{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url(../img/background.png) 0% no-repeat;
padding: 0;
min-height: 495px;
}
.tittle{
text-align: center;
width: 555px;
color: #000;
font-size: 42px;
margin: 0;
}
.button{
display: flex;
justify-content: center;
align-items: center;
flex-direction: wrap;
border: 1px solid white;
border-radius: 5px;
background: none;
color: #000;
font-size: 25px;
}
<div class="tittle-block">
<h3 class="tittle">Text here</h3>
<button type="button" class="button">View more</button>
</div>
ps: I edited the font to be #000 so that you can see it, change it back to your original #fff.
This question already has answers here:
Removing body margin in CSS
(10 answers)
Closed 2 years ago.
For some reason the code below will output a black background that has white margins around it. I even have margin: 0px but for some reason the margins are still there. I have tried to set all the other elements to 0 margin but that didn't work either.
.welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #000;
margin: 0px;
color: #fff;
}
<section id="welcome-section" class="welcome-section">
<h1>Hello My name is Ben</h1>
<p>A Web Developer </p>
</section>
.welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #000;
margin: 0px;
}
use this code
body {
margin: 0;
padding: 0;
}
.welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #000;
margin: 0px;
color: #fff;
}
<section id="welcome-section" class="welcome-section">
<h1>Hello My name is Ben</h1>
<p>A Web Developer </p>
</section>
add in your css :-
body {
margin: 0;
padding: 0;
}
You could try adding border: 0 to your style rules. It sounds like by 'margin' you mean border
It's likely something else on the page is setting a border. You really should share a full example though.
Try this,
Add this to your css
body{
margin: 0%;
}
It will fit background color to the border.
i have the following code
header {
width: 100%;
height: 65px;
background: #fff;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
display: flex;
justify-content: space-between;
align-items: center;
color: #252c3a;
}
#menu {
width: 100%;
display: flex;
margin-left: 28%;
}
#menu div {
width: 100px;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
<header>
<div id="logo">
<img src="img/header/logo.png" alt="Logo">
</div>
<div id="menu">
<div>Home</div>
<div>Club-Life</div>
<div>Training</div>
<div>Instructors</div>
<div>Contact</div>
</div>
Chrome inspect
The width of the other blocks is 100%, but the header width gets bigger than the block below. I use justify-content: space-between.
Remove width & margin
Add flex-wrap on the header
header {
width: 100%;
height: 65px;
background: #fff;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
display: flex;
justify-content: space-between;
align-items: center;
color: #252c3a;
flex-wrap:wrap;
}
#menu {
display: flex;
flex-wrap:wrap;
}
There are few things we need to do:
In header:
1. Remove width
In #main:
1. Remove width
2. Remove margin
In #menu div:
1. Remove everything and just add margin left
Demo: https://codepen.io/Bibeva/pen/povddJr
Final code:
header {
height: 65px;
background: #fff;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
display: flex;
justify-content: space-between;
align-items: center;
color: #252c3a;
}
#menu {
display: flex;
}
#menu div {
margin: 0 0 0 30px;
}
#menu {
display: flex;
}
that's all , Can you try this ?