Top header: Reduce width of input - html

Question

I'm using this grid as a top navabar and I want to make a few alterations:
How can I reduce the width of the input to 40% but still keep it right next to the logo? And how can I add a sign-in div at the right hand corner. But keep in mind that I want the entire header to remain responsive like it is now. If I do the following it looks good in a full screen but when the width of the screen is smaller the input becomes really small.
.top_nav_menu {
border-bottom: 1px solid #e3e3e3;
box-shadow: 0 0 8px 0 #eeeeee;
position: fixed;
top: 0px;
width: 100%;
height: auto;
background-color: #fafafa;
margin-right: 90px;
padding: 15px;
z-index: 2;
}
.header {
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
}
.header > form {
width: 65%;
margin-left: 25px;
}
.header > form > input {
width: 40%;
}
<div class="top_nav_menu">
<div class="header">
<img src="http://i.imgur.com/EFkps0m.png">
<form><input type="text"></form>
<div class="floar-right">Sign-in</div
</div>
</div>

Answer 1

You can either reduce the value of 40% in your CSS.
Or add new CSS for max-width:
.header > form > input {
max-width: 50px;
}
For your sign-in div, you can add this CSS:
.float-right {
float:right;
}
However your current class spells floar and not float, you should change that.

Answer 2

you can use this code
body {
margin: 0;
padding: 0;
}
.top_nav_menu {
border-bottom: 1px solid #e3e3e3;
box-shadow: 0 0 8px 0 #eeeeee;
position: fixed;
top: 0px;
width: 100%;
height: auto;
background-color: #fafafa;
margin-right: 90px;
padding: 15px;
z-index: 2;
}
.header {
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
}
.header > form {
width: 65%;
margin-left: 25px;
}
.header > form > input {
width: 24%;
}
<div class="top_nav_menu">
<div class="header">
<img src="http://i.imgur.com/EFkps0m.png">
<form><input type="text"></form>
<div class="floar-right">Sign-in</div>
</div>
</div>