.

box{
color: black;
text-align: center;
}
.head{
margin: 0;
grid-area: head;
display: grid;
grid-template-areas: " img h3 . . . . . . . . . . liste liste";
}
.nav{
grid-area: nav;
}
.sideleft{
display: grid;
grid-template-columns: 1 1fr;
grid-area: sl;
}

.content {
grid-area: cont;
display: grid;
}
.footer{
grid-area: foot;
}
.content h2{
text-align: left;
padding-left: 20px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.content h2 .html{
color: rgb(234, 48, 1);
}
.content h2 .css{
color: rgb(80, 158, 206);
}
content #par{
margin: 0;
background-color: #444;
color: white;
height: 30px;
}

ul{
grid-area: liste;
display: flex;
list-style: none;

}
h3{
justify-self: left;
font-size: 20px;
font-family: arial;
grid-area: h3;
}
ul li{
font-weight: bold;
 border-radius: 10px;
cursor: pointer;
border: solid 2px rgb(80, 158, 206);
margin: 15px;
padding:10px 10px;
}
li:hover{
color: black;
background: rgb(80, 158, 206);
}
.icon{
padding: 5px 0;
justify-self: end;
grid-area: img;
margin: 0 ;
width: 30px;

}
.imgdev{
width:300px;
margin: 10px;
padding-left: 10px;

}
.imgfb{
width:300px;
height: 250px;
padding-right: 20px;
justify-self:right;
}

<img src="brand-html5.png" class="icon">

<h3>Web Site</h3> <!--Titre de la page-->

<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li class="liste4">Contact</li>

</ul>
</div>
<p id="phtml">
HyperText Markup Language (HTML) est le code utilisé pour
structurer une page web et son contenu.
Par exemple, le contenu de votre page pourra être structuré en un
ensemble de paragraphes, une liste à puces ou avec des images et des tableaux de
données.
Comme le suggère le titre, cet article vous fournit les bases de
compréhension du HTML et de ses fonctions.
</p>
<table>
<tr><th>Service</th><th>Prix</th></tr>
<tr><td>Cours</td><td>200$</td></tr>
<tr><td>Tp</td><td>100$</td></tr>

</table>