Trouble Wrapping Text HTML CSS-CodePudding

I'm super new to HTML and CSS and I'm trying to make a small website for an assignment. I haven't gotten very far and I'm having trouble with text wrapping.

The first line of the text looks great, and I have used 20px padding to add a buffer between the edges of the window and the text it's self. The problem comes when the window is smaller than the length of the text. When the text wraps to the next line, it doesn't obey the margins and I'm not quite sure how to fix this or how to word a search query to try and fix it.

Here is a screenshot of the issue: Text wrapping issue.

Here is the CSS:

body {
    color: white;
    background-color: #131516}

.headerblock {
    padding: 10px;
    background-color: black;
    margin-top: 0px;
    margin-left: 0px;
    color: #5b5b5b;
    font-size: 30px;
    transition: 0.2s;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
}

.headerblock:hover{
    color: white;
    transition: 0.2s;
}

help {
    padding: 20px;
    word-break: normal;
    width: fit-content;
}

And here is the HTML:

<!DOCTYPE html>

<html lang="en">
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
        <link href="styles.css" rel="stylesheet">
        <title>-----------------</title>
    </head>
    <div >
        DEEZ NUTZ
    </div>
    <body>
        <help>
        Welcome to my webpage. This is where I post things that I want on my webpage. Anything I post will appear here on my webpage.
        </help>
    </body>
</html>

Thanks in advance!

CodePudding user response：

You just need to change your CSS a little bit, Because when you are text going to the next line for screen resizing, it can not get the property of padding=20px; So, you just need to add display flex.

help {
  display:flex;
    padding-left: 20px;
    word-break: normal;
}

the reason you'd choose to use flexbox is that you want to lay a collection of items out in one direction or another. As you layout your items you want to control the dimensions of the items in that one dimension or control the spacing between items

CodePudding user response：

Just change the tag to anything else like

and if you want to use the css for the

, jst give it a class like this.

body {
    color: white;
    background-color: #131516}

.headerblock {
    padding: 10px;
    background-color: black;
    margin-top: 0px;
    margin-left: 0px;
    color: #5b5b5b;
    font-size: 30px;
    transition: 0.2s;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
}

.headerblock:hover{
    color: white;
    transition: 0.2s;
}

.h {
    padding: 20px;
    word-break: normal;
    width: fit-content;
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
        <link href="styles.css" rel="stylesheet">
        <title>-----------------</title>
    </head>
    <div >
        DEEZ NUTZ
    </div>
    <body>
        <p >
        Welcome to my webpage. This is where I post things that I want on my webpage. Anything I post will appear here on my webpage.
        </p>
    </body>
</html>