Bootstrap. Why div isn't responsive? - html

Question

I made a menu without bootstrap 4. I'm looking at the result of the work and I suppose this is not responsive design. I would like to know how could I make that the space between logo on the left side and menu on the right side (about 226px) will be changing from 226 to 0 while screen will decline.
JSFiddle
.menu {
max-width: 960px; }
.menu {
background-color: #e668b1; }
.menu .col-md-3 {
border: 1px solid red; }
.menuIcon {
border: 1px solid red; }
nav ul, nav ol {
margin: 0;
padding: 0;
list-style: none; }
.mainav li {
display: inline-block;
padding: 0; }
.mainav a {
font-size: 12px;
letter-spacing: 0.6px;
line-height: 10px;
padding: 16px 17px 14px 19px;
color: #232323;
font-family: "Montserrat", sans-serif;
font-weight: 300;
opacity: 0.5;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
transition: 0.5s; }
.mainav .nav_home {
margin-right: -13px; }
.mainav .nav_pages {
margin-right: -4px; }
.mainav .nav_elements {
margin-right: -3px; }
.mainav .nav_product {
margin-right: -11px; }
.mainav .nav_blog {
margin-right: -11px; }
.mainav .nav_work {
margin-right: 6px; }
.mainav .drop {
padding-right: 10px; }
.menuIcon {
margin: auto auto -4px 30px; }
.menuIcon .line1, .line2, .line3 {
width: 20px;
height: 2px;
background-color: #000;
margin: 3px 0; }
a.current_page {
padding-left: 0; }
.mainav li li {
width: 100%;
margin: 0; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="menu row align-items-center mx-auto d-flex justify-content-between">
<div class="col-md-3 px-0">
<img src="img/Block 1 - Header/logo.png" alt="logo">
</div>
<nav class="mainav col-md-9 d-flex justify-content-end px-0">
<ul>
<li><a class="active nav_home current_page" href="index.html">Home</a></li>
<li><a class="drop nav_pages" href="#">Pages <span class="arrow"></span></a>
</li>
<li><a class="drop nav_pages" href="#">Elements <span class="arrow"></span></a>
</li>
<li><a class="nav_product" href="#">Product</a></li>
<li><a class="nav_blog" href="#">Blog</a></li>
<li><a class="nav_work" href="#">Work</a></li>
<li><a class="nav_startAproject" href="#">Start a project</a></li>
<li class="menuIcon">
<div>
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</li>
</ul>
</nav>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

Answer 1

I think the best solution is th work with % on your with of you columns and ofcourse set your width of your main div over both on 100%. I think that's a solution for your problem if this is what you mean?

Answer 2

I'm not entirely sure what you are asking but I believe what you are looking for is a media query to change the scaling for different resolutions. You can find the documentation for media queries here.