How can i make my website zoom out like this website? : Guys i have started learning CSS and HTML therefore i am new to these languages. And i've learnt how parts work such as the meta data attribute "width=device-width,height=device-height,initial-scale=1" which allows for the screen size to be adjusted according to the the device.

Then i began working on my website however i came across the problem which i need help with :

The problem is that i tried to put the content of my webpage into a div and then tried to style it by adding paddings to the left and right side so the effect would be like this website : https://www.merlincycles.com/2

However when i did this and zoomed out, the content of the webpage (the header, logo, form etc) also moved to the edges of the page however what i want to do is create an effect like the website provided so that when the user zooms out the website gets smaller but the content stays in place. Please try to zoom out on the website provided to get an idea.

Thank you

Code:

    <!DOCTYPE HTML>
    <html lang="en">
    <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-
    height,initial-scale=1">

    <title>Bike King </title>

    <link rel="stylesheet" href="screen.css" media="screen">

    </head>
    <body> 

    <div id="container">

    <div id="header">
	<a href="index.html"> Sign in/Register</a> 
	<div>Need Help? : 02080207651</div>
	<div>FREE  International shipping on<span>Selected Items</span></div>
    <!-- #header --></div>
 

    <div id="form-container">
    <img src="image/logo.png" alt="logo">
    <form action="#">
    <input type="text" id="textbox" name="textbox" required placeholder="Search 
    Bike King...">
    <input type="submit" value="Search">
    </form>  
    <!-- #form-container --></div>
 
    </div>
 

    </body>
    </html>

    * {
    padding: 0;
    margin: 0;
    }

    body {
    background-color: #f0f0f0;
    font: 100%/160% verdana, arial, helvetica, sans-serif;
	padding:0em 0em 0em;
    }
 
    #container{
	padding-right:10em;
	padding-left:10em;
    } 
 
    #header {
    padding:0.75em 1em;
    background-color: black;
    text-align: center;
    color:#fff;
    }

    #header a {
    float: left;
    color: #fff;
    text-decoration: none;
    }

    #header a:hover  {
    color: #fcab15;
    }

    #header div:first-of-type {
    float: right;
    }

    #header div:last-of-type {
    display: inline-block;
    }

    #header div:last-of-type span {
    margin-left: 0.5em;
    color: #fcab15;
    }

    #form-container {
    padding: 0.75em 1em 3em;
	background-color: #065671;
    text-align: center;
    }


    #form-container img{
	float:left;
	margin-top:-0.75em;
	position:relative;
	
    }


    #form-container form {
    display: inline-block;
    vertical-align: middle;
	margin-top:2em;
	margin-right:20em;
    }

    #form-container form input[type="text"] {
    line-height: 2.5em;
    font-size: 1em;
    }

    #form-container form input[type="submit"] {/*Controls submit box*/
	border-color: #008000;
	border-style: outset;
	background-color: #008000;
    line-height: 2.5em;
    font-size: 1em;
    }
 
    @media ( max-width:50em ) {


    #header a,
    #header div:first-of-type, 
    #header div:last-of-type  {
    float: none;
    display: block;
    }

    }

    @media ( max-width:30.5em) {

    #form-container img {
    display: block;
    margin: none;
	
    }

    #form-container label {
    display: block;
    margin: 0.5em 0;
    }

    }
 
    @media (min-width:90.5em){
	
    #header a,
    #header div:first-of-type, 
    #header div:last-of-type  {
    float: none;
    display: block;
    }
	
	
	
    }

 Thank you!