Расширить input
Нужно расширить input на всю ширину страницы. Вот код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Магазинчик Брига</title>
<style>
body { background-color: black; }
.header { position: relative;
margin-right: 1%;
margin-left: 1%; }
.icon { position: relative;
margin-left: 10px;
width: 160px; }
.search-button { border: 1px solid white;
background-color: red;
font-size: 20px;
color: white;
display: inline;
margin-left: -7px;
float: right;
margin-right: -7%; }
.search {
padding-top: 10px;
padding-bottom: 5px;
background-color: black;
border: 1px solid red;
color: white;
display: inline;
float:center;
margin-right: -1%; }
.search-block { position: relative;
display: inline;
text-align: center; }
.navicon { width: 35px;
transition: 0.5s ease-in-out; }
.header-block { display: inline; }
.header-block2 { display: inline; float: right; }
.navicon:hover { transform: scale(1.2); }
.text-on-search-button { padding-left: 5px; padding-right: 5px; }
@media (min-width: 767px) { .navicon { text-align: right; } }
</style>
</head>
<body>
<header class="header">
<div class="header-block">
<img src="logo2.png" class="icon">
</div>
<div class="header-block2">
<img src="navicon.png" class="navicon">
</div>
</header>
<input type="text" name="search" class="search">
<button class="search-button"><div class="text-on-search-button">Поиск</div></button>
</body>
</html>