I want my menu items to not overlap and stay in one line as the screen size shrinks.
This is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My menu</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-auto">
<a>Main page</a>
</div>
<div class="col-auto">
<a>Second page</a>
</div>
<div class="col-auto">
<a>Third page</a>
</div>
</div>
</div>
</body>
</html>You can see the problem in the above image:
