How can I make my website not distort when I zoom in and out?

Question

I am currently working on a website and I was wondering how I could get my navbar not distort when I zoom in. For example when I zoom out of the page the nav buttons move far away, when I zoom they form a cluster and overlap each other. What can I do to make it zoom without that happening? Here is my code:

HTML:

    <header>
    <div class="main">
        <div class="logo-text">
            <h1 class="text-logo">Title</h1>
        </div>
        <nav>
            <ul>
                <li><a href="index.html" class="active">Home</a></li>
                <li><a href="store.html">Store</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS:

* {
 margin: auto;
 padding: auto;
 box-sizing: border-box;
 font-family: Century Gothic;
 }

 header {
 height: 15%;
 background-size: cover;
 background-position: center;
 background-color: #ebebeb;
 border-bottom: 5px solid #A9A9A9;
 }

 html,
 body {
 /*  background: #000000;*/
 font-size: .80em;
 /* font-family: "Balsmiq", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;*/
 margin: 0%;
 padding: 0%;
 color: #696969;
 height: 100%;
 width: 100%;
 }

 ul {
 list-style-type: none;
 text-align: center;
 margin-top: -3.7%;
 }

 ul li {
 display: inline-block;
 margin-left: 0%;
 font-size: 170%;
 }

 ul li a {
 transition: 0.6s ease;
 text-decoration: none;
 color: #000000;
 padding: 5px 40px;
 border: 2px solid #000000;
 font-weight: 700;
 }

 ul li a:hover,
 .active {
 background-color: #000000;
 color: #ffffff;
 }

 .main {
 min-width: 300px;
 }

 .main h1 {
 padding: 1.5%;
 margin-left: 3%;
 font-family: Leckerli One;
 color: black;
 font-size: 3.1875rem;
 }

Thanks in advance!

Answer 1

Try using bootstrap to make your website responsive to all screen size. Because when you zoom in the site takes that screen size. So using @media to make it responsive to all screen. So when you zoom in or out it will remain the same.

Answer 2

You can divide page in columns for making it responsive like shown below:

<div class="section group">
    <div class="col span_1_of_3">
    This is column 1
    </div>
    <div class="col span_1_of_3">
    This is column 2
    </div>
    <div class="col span_1_of_3">
    This is column 3
    </div>
</div>

You can use BootStrap. Check tutorials there are many.