@charset "utf-8";
/* CSS Document */

body
{
  width: 80%; 
  max-width: 1260px;
  background: #000;
  font-family: 'Open Sans', sans-serif;
  padding: 20px;
  margin: auto;

  display: grid;
  grid-template-columns: 62px auto auto auto auto auto;
  grid-template-rows: repeat(4, auto);
  grid-gap: 20px;
  column-gap: 20px;
}

.box
{
	border-radius: 3px;
	background: #FFF;
	color: #000;
	padding: 20px;
	border:double;
	margin: 0px;
}
.logo
{
	grid-column: 1/2;
	grid-row: 1;
	border-radius: 3px;
	background: #FFF;
	color: #000;
	padding: 10px;
	width: 70px;
	height: 70px;
	border-top-style: double;
	border-right-style: double;
	border-bottom-style: double;
	border-left-style: double;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
}
.menu
{
	grid-column: 2/-1;
	border-radius: 3px;
	background: #FFF;
	color: #000;
	border:double;
	text-align:center;
	height: 70px;
	width: auto;
	padding: 10px;
	margin-left: 40px;
}
.divcode
{
	grid-column: 2/-1;
	border-radius: 30px;
	background: RGB(48, 10, 36);
	color: white;
	border:double;
	text-align:left;
	height: auto;
	width: auto;
	padding: 10px;
	margin-left: 20px;
}
.divutis
{
	grid-column: 2/-1;
	border-radius: 30px;
	background: RGB(107, 241, 164);
	color: black;
	border:none;
	text-align:left;
	height: auto;
	width: auto;
	padding: 10px;
	margin-left: 20px;
}


.breadcrumb
{
	grid-column: 1 / -1;
	font-size: 24px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bolder;
	text-decoration: underline;
	text-align: center;
}

.main
{
  grid-column: 2/-1;
  margin-left: 200px;
  
}

.sidebar
{
	grid-column: 1/2;
	grid-row: 3;
	width: 200px;
}

.footer
{
  grid-column: 1 / -1;
}

<!--##################################################################################################-->
<!--#                                                                                                 -->
<!--# JE METS ICI UNE BARRE DE NAVIGATION-->
<!--#                                                                                                 -->
<!--##################################################################################################-->


.mainmenubtn {
    background: RGB(48, 10, 36);
	 width: 200px.
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.mainmenubtn:hover {
    background: RGB(48, 10, 36);
    }
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background: RGB(48, 10, 36);
    min-width: 200px;
}
.dropdown-child a {
    color: RGB(48, 10, 36);
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}


<!--##################################################################################################-->
<!--#                                                                                                 -->
<!--# FIN BARRE DE NAVIGATION-->
<!--#                                                                                                 -->
<!--##################################################################################################-->

<!--##################################################################################################-->
<!--#                                                                                                 -->
<!--# ICI ELEMENTS DE SIDEBAR-->
<!--#                                                                                                 -->
<!--##################################################################################################-->
#grid {
	display: grid;
	height: 60px;
	grid-template-columns: 180px;
	grid-template-rows: repeat(5, 1fr);
	row-gap: 20px;
	width: 20%;
}

#grid > div {
  border: 1px solid green;
  background-color: RGB(48, 10, 36);

}
<!--##################################################################################################-->
<!--#                                                                                                 -->
<!--# FIN ELEMENTS DE SIDEBAR-->
<!--#                                                                                                 -->
<!--##################################################################################################-
<!--Images-->
#par {
    background: RGB(48, 10, 36);
     color: white;}
   }
code {
    background: RGB(48, 10, 36);
    
    color: white;
}
#utils {
    background: RGB(107, 241, 164);
    
    color: black;
}

#images {
	width: 600px;
	margin: 0 auto;
}
#images p {
	background: #FFF;
	overflow: hidden;
	padding: 10px;
}
#images img {
	margin: 10px;
}
.left {
	float: left;
}
.right {
	float: right;
}
.menu1 {	grid-column: 2/-1;
	border-radius: 3px;
	background: #FFF;
	color: #000;
	border:double;
	text-align:center;
	height: 70px;
	width: auto;
	padding: 10px;
	margin-left: 40px;
}
.menu11 {grid-column: 2/-1;
	border-radius: 3px;
	background: #FFF;
	color: #000;
	border:double;
	text-align:center;
	height: 70px;
	width: auto;
	padding: 10px;
	margin-left: 40px;
}
.menu2 {	grid-column: 2/-1;
	border-radius: 3px;
	background: #FFF;
	color: #000;
	border:double;
	text-align:center;
	height: 70px;
	width: auto;
	padding: 10px;
	margin-left: 40px;
}
.menu111 {grid-column: 2/-1;
	border-radius: 3px;
	background: #FFF;
	color: #000;
	border:double;
	text-align:center;
	height: 70px;
	width: auto;
	padding: 10px;
	margin-left: 40px;
}
.img-rectangle {
clip-path:ellipse(33% 50%);
}

.img-carree {
clip-path:ellipse(50% 50%);
}