-2

*{
box-sizing: border-box;
background-color: #F5F5F5;
}
body{
    margin: 0;
    padding: 20px;
}
header{
    text-align: center;
    background-color: white;
    padding: 10px;
}
.name{
    background-color: white;
}
header img{
    height: 200px;
}
.header_text{
    width: 30%;
    text-align: center;
    background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1 class="name"><b class="name">Eric Thomas</b></h1>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Dr._Eric_Thomas.png/220px-Dr._Eric_Thomas.png" alt="Eric Thomas">
        
        <article class="header_text"><small><em><b class="header_text">
            Eric D. Thomas (born September 3, 1970) is an American motivational speaker, author, consultant, and minister. 
            <br>Speeches by Thomas are popular on Youtube</b></em></small> </article>
    </header>
</body>
</html>

This is a simple header of a webpage. Everything works well except that the fig-caption refuses to align like the other contents of the header.

P.S Don't mind my outline. I just started HTML :)

Franklyn Okafor
  • 1
  • 2
  • 1
    `.header_text{width: 30%;}` means that it will take 30% of the width of the parent. If you want to center it, you can add `margin: 0 auto;`. – Amaury Hanser Jul 28 '23 at 07:25

1 Answers1

-1

You mean something like this?

        *{
            box-sizing: border-box;
            background-color: #F5F5F5;
        }
        body{
            margin: 0;
            padding: 20px;
        }
        header{
            text-align: center;
            background-color: white;
            padding: 10px;
        }
        .name{
            background-color: white;
        }
        header img{
            height: 200px;
        }
        .header_text{
            width: 30%;
            margin: 0 auto; /* Add this to center the .header_text element */
            background-color: white;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1 class="name"><b class="name">Eric Thomas</b></h1>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Dr._Eric_Thomas.png/220px-Dr._Eric_Thomas.png" alt="Eric Thomas">
        
        <article class="header_text"><small><em><b class="header_text">
            Eric D. Thomas (born September 3, 1970) is an American motivational speaker, author, consultant, and minister. 
            <br>Speeches by Thomas are popular on Youtube</b></em></small> </article>
    </header>
</body>
</html>
Polarcode
  • 309
  • 6