Css - Why is the div element in my header overflowing?

buckwheat
December 30, 2023
97 views
0 votes
2 Answers

I decided to make a personal project where I am trying to make my own portfolio by making a website which I will be adding HTML, CSS, and JavaScript. I am currently styling the header (I add bright colors to see if the width and height of images are correct) and I noticed the green box to be overflowing and I can’t seem to point what causes this. Basically I want the "My Portfolio" and "Front End Developer" to be closer to each other. Is there a way to make this happen? Here’s my code and a sample image for reference:

body{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

.hero-page-container{
    height:100vh;
    width:100vw;
    padding:0px 40px;
    box-sizing: border-box;
}

header{
    display: flex;
    align-items: center;
    height:10%;
    justify-content: flex-end;
    background-color: aqua;
}

.header-title{
    margin-right: auto;
    align-items: center;
    background-color: green;
}

.header-title h1{
    background-color: yellow;
}

.header-title p{
    background-color: orange;
}


ul{
    display:flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

header ul li{
    display: inline-block;
    margin-left:40px;
}

header ul li a{
    text-decoration: none;
}

.header-contact-btn{
    text-decoration: none;
    margin-left:40px;
}

.hero-content{
    width:100%;
    background-color: red;
    text-align: center;
    height:50vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <section class="hero-page-container">
        <header>
            <div class="header-title">
                <h1>My Portfolio</h1>
                <p>Front End Developer</p>
            </div>
            <nav>
                <ul>
                    <li><a class="active" href="#home">Home</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </nav>
            <a href="#" class="header-contact-btn">Contact</a>
        </header>
        <div class="hero-content">
            <div>
                <h1>MY NAME</h1>
                <button>Hire Me</button>
                <button>Let's Talk</button>
            </div>
        </div>
    </section>
</body>
</html>

Tags: css html

Answers

Remove the 10% height on the header, and remove the margins on the h1 and the <p>.

.header-title h1, .header-title p {
  margin: 0;
}

body{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

.hero-page-container{
    height:100vh;
    width:100vw;
    padding:0px 40px;
    box-sizing: border-box;
}

header{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: aqua;
}

.header-title{
    margin-right: auto;
    align-items: center;
    background-color: green;
}

.header-title h1{
    background-color: yellow;
    margin: 0;
}

.header-title p{
    background-color: orange;
    margin: 0;
}


ul{
    display:flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

header ul li{
    display: inline-block;
    margin-left:40px;
}

header ul li a{
    text-decoration: none;
}

.header-contact-btn{
    text-decoration: none;
    margin-left:40px;
}

.hero-content{
    width:100%;
    background-color: red;
    text-align: center;
    height:50vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <section class="hero-page-container">
        <header>
            <div class="header-title">
                <h1>My Portfolio</h1>
                <p>Front End Developer</p>
            </div>
            <nav>
                <ul>
                    <li><a class="active" href="#home">Home</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </nav>
            <a href="#" class="header-contact-btn">Contact</a>
        </header>
        <div class="hero-content">
            <div>
                <h1>MY NAME</h1>
                <button>Hire Me</button>
                <button>Let's Talk</button>
            </div>
        </div>
    </section>
</body>
</html>

As others have pointed out, the reason is that the h1 and p in your header have default top and bottom margins which all together extends the height:10%; you applied to header.

To avoid this, you can change height:10%; to min-height:10%; in the header rule. This will extend the height of your header, but it will also prevent it from getting smaller than 10%.

If you don’t want the header to get higher than 10%, you need to reset the margins for the elements inside it and in general overthink if these would at at fit in there (i.e. probably not…).

body{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

.hero-page-container{
    height:100vh;
    width:100vw;
    padding:0px 40px;
    box-sizing: border-box;
}

header{
    display: flex;
    align-items: center;
    min-height:10%;
    justify-content: flex-end;
    background-color: aqua;
}

.header-title{
    margin-right: auto;
    align-items: center;
    background-color: green;
}

.header-title h1{
    background-color: yellow;
}

.header-title p{
    background-color: orange;
}


ul{
    display:flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

header ul li{
    display: inline-block;
    margin-left:40px;
}

header ul li a{
    text-decoration: none;
}

.header-contact-btn{
    text-decoration: none;
    margin-left:40px;
}

.hero-content{
    width:100%;
    background-color: red;
    text-align: center;
    height:50vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <section class="hero-page-container">
        <header>
            <div class="header-title">
                <h1>My Portfolio</h1>
                <p>Front End Developer</p>
            </div>
            <nav>
                <ul>
                    <li><a class="active" href="#home">Home</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </nav>
            <a href="#" class="header-contact-btn">Contact</a>
        </header>
        <div class="hero-content">
            <div>
                <h1>MY NAME</h1>
                <button>Hire Me</button>
                <button>Let's Talk</button>
            </div>
        </div>
    </section>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – Why is the div element in my header overflowing?

Answers