Removing margin from h1 messing up the header

Question

so i have a fairly simple layout of a website all was going well until i finished the header and moved on to the first section of the page i wanted the section to take all available space that i was able to do but where i got stuck is when i added a few text and it made the section go down a little i thought it was the margin on h1 tag so i removed it but it messed up the whole header,i dont know why im having this problem the i've not used fixed pixels or anything i've used flexbox on all the header items but still the text is not centering ...

body {
    margin: 0px;
    padding: 0px;
    background: #7f8fa6;
    font-family: 'Lexend Mega', sans-serif;
    box-sizing: border-box;
}


h1{
    margin: 0;
}
  

.wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: auto;
}

header{
    background-color: white;
    height: 84px ;
}


.brand{
    display: flex;
}



.header__right ul{
    display: flex;
    list-style-type: none;
    align-items: center;


}

.header__right ul li a{
    text-decoration: none;
    color: black;
    font-size: 0.8em;
    font-weight: 500;
}


.header__right ul li{
    padding-right: 7px;
}
.header__right ul li:nth-child(7){
    padding-left: 10px;
    font-size: 27px;
}

section {
    background-color:wheat ;
    height: calc(100vh - 84px) ; 
}

.content{
   
    height: calc(90vh - 84px) ;
    gap: 20px;    
}



section button{

    border: none;
    height: 60px;
    width: 110px;
    background-color: black;
    color: white;
}

      <header>
            <div class="wrapper">

                <div class="header__left">
                    <div class="brand">
                       <h1>Blush.</h1>
                    </div>
                </div>

                <div class="header__right">
                    <ul>
                        <li><a href="">Shop</a></li>
                        <li class="fal fa-arrow-down"></li>
                        <li><a href="">About</a></li>
                        <li><a href="">LookBook</a></li>
                        <li><a href="">Visit Us</a></li>
                        <li><a href="">Contact</a></li>
                        <li class="fal fa-shopping-bag"><a href=""></a></li>
                    </ul>
                </div>
            </div>

        </header>

        <section>
            <div class="content">
                <h1>New Winter Collection</h1>
                <h3>Shop The Latest Fashion</h3>
                <button>Shop Now</button>
            </div>
        </section>

score 0 · Accepted Answer · answered Feb 12 '21 at 08:03

0

if you add this on you div.content in your css it should center everything

  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

answered Feb 12 '21 at 08:03

Alex Crudu

30
6

yes it works, but i want to know why does removing margin from the h1 mess the header?its in its own container and why doesn't flexbox's center work? – ChDrY322 Feb 12 '21 at 08:06
1

This is because you have an additional H1 in the header and you remove the margin globally for all of the H1s on your page. You can add an additional class to the H1 in the body and it will stop affecting the header. – Alex Crudu Feb 12 '21 at 08:47
ok yes, but why doesn't the flexbox's align-items center it again? after the margin's been removed? isn't it suppose to be work like that ? – ChDrY322 Feb 12 '21 at 09:55
Your header is fixed height, but the div inside it takes the content height and it's smaller than the header. You can add display flex to the header and the div inside to the center. Flex only works for items that are direct children of the container. – Alex Crudu Feb 12 '21 at 09:58

Removing margin from h1 messing up the header

1 Answers1