https://i.imgur.com/Pibl7GR.png
try this code – https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 118%;
}
.content {
width: 125%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 18px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
}
.menu li:hover {
background-color: #0099cc;
}
.containerMenu {
display:flex;
}
.containerMenu #m1
{
order:1;
margin-right:20px;
}
.containerMenu #m2
{
order: 2;
padding: 2px;
margin-bottom: 12px;
}
.containerMenu #m3 {
order: 3;
margin-right:20px;
}
.containerMenu #m4 {
order: 4;
padding: 2px;
margin-bottom: 12px;
}
.containerMenu #m5
{
order:5;
margin-right:20px;
}
.containerMenu #m6 {
order: 6;
padding: 2px;
margin-bottom: 12px;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="clearfix">
<div class="column menu">
<ul class="containerMenu">
<p id="m2"><Strong> Test - text appear here testing testing testing test</strong></p>
<p id="m4"><Strong> Test - text appear here testing testing testing test</strong></p>
<p id="m6"><Strong> Test - text appear here testing testing testing test</strong></p>
<li id="m1">Part 1</li>
<li id="m3">Part 3</li>
<li id="m5">Part 5</li>
</ul>
</div>
</div>
<div class="footer">
<p>Welcome</p>
</div>
</body>
</html>Your full, edited code below:
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 118%;
}
.content {
width: 125%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li{
display: block;
clear: both;
}
.menu li span{
padding: 18px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
float: left;
margin-right: 15px;
}
.menu li span:hover {
background-color: #0099cc;
cursor: pointer;
}
.containerMenu {
display:block;
}
.menu li p{
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="clearfix">
<div class="column menu">
<ul class="containerMenu">
<li id="m1"><span>Part 1</span><p id="m2"><Strong> Test - text appear here testing testing testing test</strong></p></li>
<li id="m3"><span>Part 3</span><p id="m4"><Strong> Test - text appear here testing testing testing test</strong></p></li>
<li id="m5"><span>Part 5</span><p id="m6"><Strong> Test - text appear here testing testing testing test</strong></p></li>
</ul>
</div>
</div>
<div class="footer">
<p>Welcome</p>
</div>
</body>
</html>^V
]]>It seem the site you have listed in your profile has some serious security issues:
https://sitecheck.sucuri.net/results/mp3forest.com/
Please help all here in the forums and remove that from your profile.
]]>