I am having trouble with getting my navigation to take up my flexbox. The navigation only takes up a small portion of the box it's in

Question

The code when ran doesn't fill the flexbox like I would like it to do, and I want to continue to be more so responsive to size changes. I have pulled resources from a lot of places and still can't find out why it isn't working. I came here because I often use this site to help with other work as well.

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

/* Header */
    .column, .columna, .columnab, .columnb {
        align-items: center;
        text-align: center;
        border: solid;
        border-width: thin;
        max-height: 20em;
    }
    .column {
        flex: 33%;
    }
    .columna {
        width: 100%;
        
    }
    .columnab {
        width: 22%;
        
    }
    .columnb {
        width: 17%;
        
    }
    .row {
        min-height: 10em;
        display: flex;
        flex-wrap: wrap;
        background-color: #FF9176;
    }
/* Navigation Section */
    .dropbtn {
        background-color: #FF9176;
        color: #0061A0;
        font-size: 75%;
        font-family: 'Solway', serif;
        padding: 16px;
        border: none;
        cursor: pointer;
    }

    .dropbtn:hover, .dropbtn:focus {
        background-color: #FEB384;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        
    }

    .dropdown-content {
        display: none;
        width: 100%;
        position: absolute;
        background-color: #FEB384;
        min-width: 160px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown a:hover {background-color: #FECE9D;}

    .show {display: block;}

<header>

<div class="row">
    <div class="column" style="padding: 0">
        <div class="columna">
            <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">GROUP 1</button>
            <div id="myDropdown" class="dropdown-content">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
            <a href="#">Item 3</a>
            </div>
            </div>
        </div>
        <div class="columna">
            <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">GROUP 2</button>
            <div id="myDropdown" class="dropdown-content">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
            <a href="#">Item 3</a>
            </div>
            </div>
        </div>
        <div class="columna">
            <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">GROUP 3</button>
            <div id="myDropdown" class="dropdown-content">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
            <a href="#">Item 3</a>
            </div>
            </div>
        </div>
        <div class="columna">
            <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">GROUP 4</button>
            <div id="myDropdown" class="dropdown-content">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
            <a href="#">Item 3</a>
            </div>
            </div>
        </div>
        </div>
        <div class="column">
            <h6> LOGO </h6>
            <a href="index.html"><img src="images/print_studio_logo.***" alt="Print Studio's Logo"></a>
        </div>
        <div class="column" style="padding: 0">
        <div class="columna" style="height: 50%;">
            <h6> INSERT CART / LOGIN </h6>
        </div>
        <div class="columna" style="height: 50%;">
            <h6> INSERT SOCIAL </h6>
        </div>
    </div>
</div>
</header>

Answer 1

Welcome to stack overflow. Your question is not very clear could you be more precised about the element you would like to fill, by pointing classes or maing img.

For now I adjusted the width of your dropdown class that were not by 100%

.dropdown{
  width: 100%;
}
.dropdown button {
  width: 100%;
}

DEMO based on what I understood.

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

/* Header */
    .column, .columna, .columnab, .columnb {
        align-items: center;
        text-align: center;
        border: solid;
        border-width: thin;
        max-height: 20em;
    }
    .column {
        flex: 33%;
    }
    .columna {
        width: 100%;
        
    }
    .columnab {
        width: 22%;
        
    }
    .columnb {
        width: 17%;
        
    }
    .row {
        min-height: 10em;
        display: flex;
        flex-wrap: wrap;
        background-color: #FF9176;
    }
/* Navigation Section */
    .dropbtn {
        background-color: #FF9176;
        color: #0061A0;
        font-size: 75%;
        font-family: 'Solway', serif;
        padding: 16px;
        border: none;
        cursor: pointer;
    }

    .dropbtn:hover, .dropbtn:focus {
        background-color: #FEB384;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        width:100%;
    }

    .dropdown-content {
        display: none;
        width: 100%;
        position: absolute;
        background-color: #FEB384;
        min-width: 160px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown a:hover {background-color: #FECE9D;}
    
    .dropdown button{ width:100%;}
    
    .show {display: block;}

<header>

<div class="row">
    <div class="column" style="padding: 0">
        <div class="columna">
            <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">GROUP 1</button>
            <div id="myDropdown" class="dropdown-content">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
            <a href="#">Item 3</a>
            </div>
            </div>
        </div>
        <div class="columna">
            <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">GROUP 2</button>
            <div id="myDropdown" class="dropdown-content">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
            <a href="#">Item 3</a>
            </div>
            </div>
        </div>
        <div class="columna">
            <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">GROUP 3</button>
            <div id="myDropdown" class="dropdown-content">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
            <a href="#">Item 3</a>
            </div>
            </div>
        </div>
        <div class="columna">
            <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">GROUP 4</button>
            <div id="myDropdown" class="dropdown-content">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
            <a href="#">Item 3</a>
            </div>
            </div>
        </div>
        </div>
        <div class="column">
            <h6> LOGO </h6>
            <a href="index.html"><img src="images/print_studio_logo.***" alt="Print Studio's Logo"></a>
        </div>
        <div class="column" style="padding: 0">
        <div class="columna" style="height: 50%;">
            <h6> INSERT CART / LOGIN </h6>
        </div>
        <div class="columna" style="height: 50%;">
            <h6> INSERT SOCIAL </h6>
        </div>
    </div>
</div>
</header>