How can I move text to the next line? - html

Question

I am a beginner and doing my first easy challenge, but I got stuck anyway :D
I want to move the text down, to the next line.
In particular, I want to make the text like this:
Final result
<div class="container">
<img src="/image-qr-code.png" alt="" />
<p class="main">Improve your front-end skills by building projects</p>
<p class="second">
Scan QR Code to visit front-end Mentor and take your coding skills to the next level
</p>
</div>

Answer 1

The p element will wrap automatically when there is a static width on the parent. This can also be done by using a static max-width on the element you want to constrain. You can also use margin to constrain the text relative to its parent. In your case, I used margin on second and main to allow the text to match the image you provided. Here is a simple demonstration:
.container {
box-shadow: 1px 1px 13px 7px rgb(200 198 198);
width: 240px;
max-width: 240px;
padding: 1em;
border-radius: 5px;
margin: auto;
}
.contain {
background-color: blue;
border-radius: 5px;
display: flex;
justify-content: center;
padding: 1em;
}
img {
max-width: 100%;
}
.main {
font-weight: bold;
text-align: center;
margin: 1em 2em;
}
.second {
text-align: center;
margin: 1em 1em;
}
<div class="container">
<div class="contain">
<img src="https://dummyimage.com/150/000/fff&text=QR+CODE" https://stackoverflow.com/questions/72034538/how-can-i-move-text-to-the-next-line# alt="" />
</div>
<p class="main">Improve your front-end skills by building projects</p>
<p class="second">
Scan QR Code to visit front-end Mentor and take your coding skills to the next level
</p>
</div>

Answer 2

What you can do is put them separate divs
This will put the words in another line.
If what you mean was that the text does not overflow, that would include CSS>
Here is some of the code
html,
body {
margin: 0;
padding: 0;
background-color: rgb(174, 220, 239);
}
.container {
display: grid;
place-items: center;
padding-top: 300px;
}
form {
background-color: white;
width: 270px;
padding: 20px;
padding-top: 90px;
}
<div class="container">
<form action="">
<img src="/image-qr-code.png" alt="" />
<p class="main">Improve your front-end skills by building projects</p>
<div class="second">
<p>
Scan QR Code to visit front-end Mentor and take your coding skills to the next level
</p>
</div>
</form>
</div>