Hello, I am completely new to the world of HTML and CSS and I am currently working on creating a small website for a project. Unfortunately, I have hit a roadblock when it comes to text wrapping.
The problem arises when the length of the window is smaller than the text itself and the text wraps to the next line. At this point, it doesn't follow the margins that I have set, and I am unsure how to resolve this issue or even what to search for in order to find a solution.
For reference, here is a screenshot showcasing the problem: Text wrapping issue.
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;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aecc...
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<div class="headerblock">
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>