我怎样才能让我的网站像这个网站一样缩小？

Question

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.

 * { 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; } }

 <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>

Answer 1

As I understand, you don't want your content to be scaled along with the page. If I am right, instead of this:

#container {
    padding-right: 10em;
    padding-left: 10em;
}

Edit it to look like this:

#container {
    width: 980px;
    margin: 0 auto;
}

 * { padding: 0; margin: 0; } body { background-color: #f0f0f0; font: 100%/160% verdana, arial, helvetica, sans-serif; padding: 0em 0em 0em; } #container { width:980px; margin: 0 auto; } #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; } }

 <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>

Of course, you can change the width. I've set it to 980px for this example only and you should change it and set it however you want.