As soon as I increase the input, I increase the width, the field increases the load and, accordingly, the length of the screen block increases, which is why crawls appear on the screen

HTML

<div class="but-d">
  <input class="no-ds" type="search" placeholder="Site search"></input>
  divisions

CSS *** excluding width, height***

.but-d {
  indent: 0x700 pixels;
}

.but-ds {
  border radius: 5 pixels;
  Background color: #F7F7F7;
  Borders: missing;
  shadow field: 0 06 pixels rgba(0, 0, 0, .2);
  font size: 30 pixels;
}

.but-d {
  indentation: 0 pixels by 700 pixels;
}

CSS s width, height

.but-d {
  indent: 0x700 pixels;
}

.but-ds {
border radius: 5 pixels;
  Background color: #F7F7F7;
  Borders: missing;
  shadow field: 0 06 pixels rgba(0, 0, 0, .2); 
  font size: 30 pixels;
  width: 1000 pixels;
  height: 65 pixels;
}

.but-d {
  indentation: 0x700 pixels;
}

Please tell me how to enlarge the button

I tried to use the button magnification via width, hight – but at the same time the block size increased and, consequently, a strip appeared at the bottom for scrolling to the right