Change menu icon position HTML/CSS with FlexBox Grid - html

Question

I have a menu icon which is displayed when window reaches certain size.
Everything is fine but the position of this icon. I don't know how to get this to the right side of the site - the most favourable would be to define the right property.
Here's what it look like now:
And I would like it to be really close to the right boundary of the window.
Here's the code:
HTML:
<div class="header">
<div class="row">
<div class="col-sm-offset-1">
<img src="images/logo.svg">
</div>
<div class="col-xs-offset-1">
<div class="iconcont">
<a href="javascript:void(0);" class="icon" onclick="header()" >
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
</div>
<div class="menu" id="mainmenu">
Home
News
Members
History
Projects
</div>
</div>
</div>
</div>
CSS:
/* HEADER */
.header {
background-image: url("images/stars.png");
width: 100%;
height: 150px;
}
header img {
height: 100%;
width: 100%;
}
/* MENU */
.menu {
background-color: transparent;
overflow: hidden;
}
.icon {
display: none;
}
#media screen and (max-width: 1370px) {
.menu a {
display: none;
}
.icon {
display: block;
}
}
.iconcont {
top: 55px;
position: relative;
}
I tried to wrap it in div (iconcont) but the right or left property doesn't work as I want. I guess it's because the whole menu is "col-xs-offset-1" (Flexbox Grid) but I don't know how to fix this and not ruin everything else.
EDIT:
For anyonewondering I fixed it. I put the icon in another div col-offset-5 but AFTER menu. I don't know why I hadn't done it in the first place.

Answer 1

Maybe add an ID to the class you want special treatment for and then make an exception with that?
HTML
<div class="col-xs-offset-1" id="header-layout">
<div class="iconcont">
<a href="javascript:void(0);" class="icon" onclick="header()" >
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
</div>
<div class="menu" id="mainmenu">
Home
News
Members
History
Projects
</div>
</div>
CSS
#media screen and (max-width: 1370px) {
#header-layout
{ display: flex;
align-items: flex-end;
}
}