HTML/ CSS/ Bootstrap: Navigational buttons on edge of footer - html

Question

I am trying to implement three navigational buttons on the edge of the footer (so overlapping the header and going into "center of page"). It is supposed to look like this:
How it is supposed to look like
The three buttons I am talking about are the "Dashboard", "Reports" and "Form editing" buttons.
I actually got to this design but when I implemented the other two buttons above this ("Contact us" and "Log out"), one of the 3 navigational buttons jumped out of its position and I am wondering why this happened? Also, when I then implemented bootstrap cdn afterwards, all three buttons changed their size and position and now I'm kind of lost. This is how it looks now:
Current design
My code is the following:
HTML:
<div class="wrapperforstickyfooter">
<header role="banner" class="header-reports">
<div class="content-wrap">
<img class="logo" src="../../_images/logo.JPG" alt="Logo">
<input class="logoutbtns" type="button" value="Log out"/>
<i class="material-icons" id="logout-icons">lock</i>
<input class="contactbtns" type="button" value="Contact us"/>
<i class="material-icons" id="contact-icons">contactmail</i>
<a class= "buttonDB" href="#"> Dashboard</a>
<a class= "buttonREP" href="#"> Reports</a>
<a class= "buttonEDIT" href="#"> Form editing</a>
</div>
</header>
CSS:
.buttonDB, .buttonREP, .buttonEDIT {
background: rgb(234,235,235);
color: rgb(109,111,113);
text-decoration: none;
height: 20px;
width: 180px;
display: inline-block;
text-align: center;
margin-bottom: -20px;
border-top: 10px solid rgb(227,111,30);
position:relative;
left:330px;
top:20px;
font:13px/1.5 Verdana,Helvetica,Arial,sans-serif;
}
.buttonREP {
border-top: 10px solid rgb(225,37,134);
}
.buttonEDIT {
border-top: 10px solid rgb(110,25,112);
}
.content-wrap {
max-width: 1170px;
margin: 0 auto;
padding: 5px;
}
The class .contentwrap is implemented to ensure the text-free margins at the edge of the pages without affecting the background color of the header and footer.
Not sure if you need this but this is the CSS for the logout and contact us buttons:
.logoutbtns {
float:right;
border: none;
background: rgb(0,143,197);
color: white;
font-size: 1em;
/*padding:30px 15px;*/
padding-top:30px;
padding-right: 15px;
margin-right:0;
margin-bottom:0;
}
.contactbtns {
float:right;
border: none;
background: rgb(0,143,197);
color: white;
font-size: 1em;
padding-top:30px;
padding-right: 10px;
margin-right:40px;
margin-bottom:0;
}
.material-icons{
color:white;
float:right;
}
#logout-icons, #contact-icons{
margin-top:25px;
margin-right:0px;
margin-bottom:0;
padding-bottom:0;
}
I am quite stuck here and just cannot figure out what I did wrong.

Answer 1

Does this solve your problem? Only the changes have been made to the .buttonDB, .buttonREP, .buttonEDIT {} and added a button-group class. You can make changes to the button-group class position according to your needs whether you want a relative margin or an absolute, you can tweak around it.
.button-group{
display: flex;
position: absolute;
right:15%;
top: 100px;
}
.buttonDB, .buttonREP, .buttonEDIT {
background: rgb(234,235,235);
color: rgb(109,111,113);
text-decoration: none;
height: 50px;
width: 180px;
display: inline-block;
text-align: center;
border-top: 10px solid rgb(227,111,30);
position:relative;
font:13px/1.5 Verdana,Helvetica,Arial,sans-serif;
margin-right: 10px;
}
.buttonREP {
border-top: 10px solid rgb(225,37,134);
}
.buttonEDIT {
border-top: 10px solid rgb(110,25,112);
}
.content-wrap {
max-width: 1170px;
margin: 0 auto;
padding: 5px;
}
.logoutbtns {
float:right;
border: none;
background: rgb(0,143,197);
color: white;
font-size: 1em;
/*padding:30px 15px;*/
padding-top:30px;
padding-right: 15px;
margin-right:0;
margin-bottom:0;
}
.contactbtns {
float:right;
border: none;
background: rgb(0,143,197);
color: white;
font-size: 1em;
padding-top:30px;
padding-right: 10px;
margin-right:40px;
margin-bottom:0;
}
.material-icons{
color:white;
float:right;
}
#logout-icons, #contact-icons{
margin-top:25px;
margin-right:0px;
margin-bottom:0;
padding-bottom:0;
}
#media only screen
and (max-width : 700px) {
.button-group{
right:3%;
}
.buttonDB, .buttonREP, .buttonEDIT {
height: 30px;
width: 100px;
}
}
<div class="wrapperforstickyfooter">
<header role="banner" class="header-reports">
<div class="content-wrap">
<img class="logo" src="../../_images/logo.JPG" alt="Logo">
<input class="logoutbtns" type="button" value="Log out"/>
<i class="material-icons" id="logout-icons">lock</i>
<input class="contactbtns" type="button" value="Contact us"/>
<i class="material-icons" id="contact-icons">contactmail</i>
<div class="button-group">
<a class= "buttonDB" href="#"> Dashboard</a>
<a class= "buttonREP" href="#"> Reports</a>
<a class= "buttonEDIT" href="#"> Form editing</a>
</div>
</div>
</header>
</div>
I made changes in the answer, hope it helps.

Answer 2

#Harshit:
Thanks for your answer! As said before it worked and looks really nice now. However, when resizing the window (i.e. making it smaller) the buttons stay exactly where they are, so the margin to the right doesn't change nor does their size adjust.
I adjusted the button-group class now to look like this:
.button-group{
display:flex;
position:absolute;
right:7%;
top:100px;
}
This is how the page looks in the beginning. The buttons are exactly how they are supposed to be:
And this is how it looks when making it smaller:
One can directly see that the buttons keep the same distance to the right edge whereas the other stuff immediately starts to shrink its distance to the right edge. Also when I make it really small, the buttons disappear once they are on the left edge of the window. Is there anything I am doing wrong here?