Issue with making items menu neat - html

Question

I am working on a menu with CSS where when I point on the third item in the first row of the menu, the item will be bigger and then the second row will be messy. I tried to change the margins of the items and the sizes too, but it didn't work with me. also, I tried to change the padding of the menu body and the size, but nothing worked too.
I hope there is someone who could help.
thank you in advance
https://jsfiddle.net/a1dzbg1v/1/
here are HTML code and CSS
#menu {
padding: 0 10px;
}
.menu {
padding: 3px 5px;
margin: 0 5px;
position: relative;
display: inline-block;
border: 2px solid black;
border-radius: 10px;
float: right;
cursor: pointer;
}
.menu:hover {
background: #f9e8b5;
}
.menu-content {
position: absolute;
right: 0px;
width: 273px;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
text-align: center;
border: 1px solid black;
border-radius: 10px;
color: black;
background: linear-gradient(to bottom, #d3bd7b 0%,#ead28a 50%);
height: 0px;
padding: 40px 5px 20px 5px;
-webkit-transition: height 2s ease-out; /* For Safari 3.1 to 6.0 */
transition: height 2s ease-out;
}
.menu-content:hover {
height: auto;
padding: 45px 5px 25px 5px;
-webkit-transition: height 2s ease-out; /* For Safari 3.1 to 6.0 */
transition: height 2s ease-out;
}
.menu .menu-content {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;
}
.menu:hover .menu-content {
display: block;
visibility: visible;
opacity: 1;
}
.menu-header {
position: absolute;
top: 0px;
left: 0px;
width: 283px;
height: 40px;
background: black;
margin: 0px;
padding: 0px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.menu-header p{
color: #ead28a;
font-weight: bold;
font-size: 20px;
margin: 8px;
}
.menu-footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 283px;
height: 20px;
background: black;
margin: 0px;
padding: 0px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.menu-footer p{
color: #ead28a;
margin: 4px;
}
.menu-item {
visibility: hidden;
list-style-type: none;
height: 60px;
width: 60px;
margin: 15px;
float: left;
border-radius: 10px;
-webkit-transition: width 2s, height 2s, margin 2s, visibility 2s, opacity 1s linear; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, margin 2s, visibility 2s, opacity 1s linear;
}
.menu-content .menu-item{
}
.menu-content:hover .menu-item {
visibility: visible;
opacity: 1;
}
.menu-item:hover {
height: 85px;
width: 85px;
margin: 0px;
background: #f9e8b5;
padding: 0px;
}
.menu-item a {
height: 60px;
width: 60px;
display: block;
text-decoration: none;
border-radius: 10px;
margin: 0px;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: linear-gradient(to bottom, #d3bd7b 0%,#ead28a 50%);
transform: scale(1);
-webkit-transition: width 2s, height 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s;
}
.menu-item a:hover {
height: 85px;
width: 85px;
display: block;
margin: 0px;
background: #f9e8b5;
padding: 0px;
transform: scale(1);
}
.menu-item a p {
visibility: hidden;
opacity: 0;
margin: 0px;
-webkit-transition:visibility 2s, opacity 1s linear; /* For Safari 3.1 to 6.0 */
transition: visibility 2s, opacity 1s linear;
-webkit-transition-delay: 0.5s; /* Safari */
transition-delay: 0.5s;
}
.menu-item:hover.menu-item a p {
font-size: 16px;
visibility: visible;
opacity: 1;
}
.menu-item a img {
margin-top: 10px;
}
.menu-item:hover.menu-item a img {
margin-top: 20px;
}
<div id="menu">
<div class="menu">
<spin><img class="icon" src="#" /></spin>
<div class="menu-content">
<div class="menu-header">
<p>User Menu</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 1</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 2</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 3</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 4</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 5</p>
</div>
<div class="menu-item">
<img class="icon" src="#" /><p>Item 6</p>
</div>
<div class="menu-footer">
<p><?php echo date("m-d-Y :: H:i:s");?></p>
</div>
</div>
</div>
</div>

Answer 1

I don't know where the rule about the transformation matrix is coming from; in an element inspector, it shows up in "Computed" styles, but I don't see any rule with a transform matrix in your actual CSS.
That said, I ran your code snippet and the only way I could figure out to fix your problem was to add
clear: left;
to your fourth menu-item div (the Meals one). You can do that the usual way in your stylesheet by calling nth-child or giving that element its own class name. You could also do an inline style but generally I know that's not recommended.
I'm sure there's a better way to fix this that wouldn't involve applying this to only one of your menu item divs, but it works.