Keeping SVG icons side-by-side in the nav bar - html

Question

My problem is when I'm going to level the icons side by side, even though I put the margin and padding I've already turned many sites, in an attempt to solve it I created this bar where the buttons are aligned as well as implemented an animation on top of them, but if I put the icons together in front of this bar, it loses the animation's integrity.
My goal is to join the icons in the upper right corner...... besides twitter/tumblr I still have 3 others...
I appreciate any and all help, I'm a beginner in programming.
/*icones tumblr, insta*/
.icones i {
display: inline-block;
width: 100%;
height: 30px;
padding: 0px 20px;
margin: 0px 5px;
}
ul {
position: absolute;
top:20%;
left: 45%;
transform: translate(-80%, -70%);
margin: 0%;
padding: 20px 0px;
background: rgb(228, 211, 228);
display: flex;
border-radius: 15px;
}
ul li a{
list-style: none;
text-align: center;
display: block;
}
#tumblr {
width: 25px;
padding-left: 700px;
}
#twitter {
width: 45px;
padding-left: 600px;
margin-top: 10px;
margin-bottom: 2em;
}
.container {
display: grid;
grid-template-columns: 4fr 2fr;
grid-template-rows: 100px 50px;
grid-template-columns: auto auto auto auto auto auto;
}
#navbar {
display: flex;
flex-direction: column;
align-items: center;
grid-column: 1 / 5;
}
<nav class="container" style="background-color:#7B68EE; height:60px; width: 100%; text-align: center; border: 3px solid">
<div class="navbar">
<div id="nave">
<p style="text-align:right; color:rgb(248, 233, 185)">
<ul>
<li> Folders</li>
<li> Files</li>
<li> Content</li>
<li> Home</li>
<li> Documents </li>
<li></li>
</ul>
<div class="navbar2">
<a href="#" class="hrv-icon-bounce">
<div id="tumblr">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="tumblr"
class="svg-inline--fa fa-tumblr fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="currentColor" d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5
0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5
10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2
3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"></path></svg>
</div>
</a>
<a href="#" class="hrv-icon-bounce">
<div id="twitter">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299
49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969
7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828
46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 0.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
</div>
</a>
</p>
</div>
</div>
</div>
</nav>

Answer 1

I've tidied and simplified your code and added some CSS styling to make it display how I think you probably want it. I've assumed you want the text menu centred and the social icons pushed to the right. I've added comments to the CSS so hopefully you can follow what I have done.
I've made the two parts of the nav bar into separate unordered lists (ul).
I am using a flex-box layout to position and size those two sections.
I set the text menu to be flex: 1 so it expands to fill most of the space in the nav bar. This pushes the social icons to the right hand end of the bar.
One final piece of advice to you as you begin programming:
Get into the habit of being consistent with your indenting. Keeping your code tidy will help you as you develop your program or website. And it will help anyone else who may need to work on it later.
nav.navbar {
/* Use a flex-box layout to put the menu and icons side by side */
display: flex;
/* Centre the flex children (the ULs) vertically in the flex box */
align-items: center;
background-color:#7B68EE;
height:60px;
width: 100%;
text-align: center;
border: 3px solid;
}
nav.navbar .menu {
/* Removes standard list styling. Hide bullets, remove padding. */
list-style: none;
padding: 0;
/* Make menu expand to fill most of the space in the menubar */
flex: 1;
}
nav.navbar .menu li {
/* Makes menu list items display horizontally rather than vertically */
display: inline;
}
/* Add some spacing between the menu items */
nav.navbar .menu li:not(:first-child) {
padding-left: 1em;
}
nav.navbar .social-icons {
/* Removes standard list styling. Hide bullets, remove padding. */
list-style: none;
padding: 0;
}
nav.navbar .social-icons li {
/* Makes social list items display horizontally rather than vertically */
display: inline;
}
nav.navbar .social-icons svg {
width: 30px;
height: 30px;
}
<nav class="navbar">
<ul class="menu">
<li>Folders</li>
<li>Files</li>
<li>Content</li>
<li>Home</li>
<li>Documents</li>
</ul>
<ul class ="social-icons">
<li>
<a href="#" class="hrv-icon-bounce">
<svg class="tumblr" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="tumblr"role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="currentColor" d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5
0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5
10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2
3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"></path>
</svg>
</a>
</li>
<li>
<a href="#" class="hrv-icon-bounce">
<svg class="twitter" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img"viewBox="0 0 512 512">
<path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299
49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969
7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828
46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 0.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
</li>
</ul>
</nav>