Question 416341 in Html Question posted in
Some basic documentation can be found here.

Html – Resizing header font overflows from the box

I’m somewhat new to css and I’ve been trying to create a header with the website title sitting in the middle of it. Only thing is when I try to make the font bigger it moves down and eventually overflows out of the header box. I want to keep it contained within but I have no idea how.

This is what I have so far:

header {
    background-color: #ffd7f5;
    color: #fe8fd3;
    text-align: center;
    font-size: 47px;
    position: fixed;
    top: 0;
    width: 100%;
    height: 110px;
    z-index: 5;
    margin: auto;
    border-radius: 5px;
    border: 5px dashed #fe8fd3;
}

and this is the html:

<body>
        <header>
            <h1>Header Title</h1>
        </header>
</body>
Tags:

2

Answers


  1. 0

    I changed your code little bit as below. Try it.

    <!DOCTYPE html>
<html>
<head>
<style>
/* Header styles */
header {
    background-color: #ffd7f5;
    color: #fe8fd3;
    text-align: center;
    font-size: 47px;
    position: fixed;
    top: 0;
    width: 100%;
    height: 110px;
    z-index: 5;
    margin: auto;
    border-radius: 5px;
    border: 5px dashed #fe8fd3;
    display: flex; /* Enables flexbox */
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
}

/* Title styles */
header h1 {
    font-size: 36px; /* Adjust font size as needed */
    margin: 0; /* Removes default margins */
    line-height: 1.2; /* Ensures proper spacing within the text */
}
</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centered Header</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Website Title</h1>
    </header>
</body>
</html>
    Login or Signup to reply.
  2. 0

    H1 tag is taking default margin, you need to set it up. Just add the below css code in your style and it will work fine.

    header h1{margin:0;padding:0;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search