Why is my nested div content shrinking and space I did not declare appearing between the div containers?

Question

This the output I'm getting: image of the undesired output I'm getting

I don't know why there's space between the two parent divs under the header tag #fsect and #menus and the contents are also unable to properly get spaced.

No matter what I try the space between the two divs just don't go and the contents also stays shrunk together. The html is properly rendered it's the css that is not working the way I want it to.

This is the way I want the header to be arranged: The header of this picture is the design I want to get on my css

* {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  text-decoration: none;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

header {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: auto;
  width: 100%;
  column-gap: 0%;
  background: #fff;
}

#ballo {
  grid-column: 1/2;
}

#balloresize {
  width: 50%;
  height: 30%;
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

#balloicresize {
  max-width: 100%;
  box-sizing: border-box;
}

#menus {
  grid-column: 2/3;
  display: flex;
  flex-flow: row nowrap;
  width: 50%;
  justify-content: space-evenly;
}

<header>
  <div id="ballo">
    <div id="balloresize"> <img src="images/BAL.png" alt="" id="balloicresize">
      <h2>Black Anthem LTD</h2>
    </div>
  </div>
  <div id="menus">
    <div class="icir">
      <img src="images/bmenu icon.png" alt="menu" class="icimg">
    </div>
    <div id="home">
      <a href="https://www.blackanthemltd.site/">
        <h3>HOME</h3>
      </a>
    </div>
    <div id="aut">
      <a href="https://www.blackanthemltd.site/About">
        <h3>ABOUT</h3>
      </a>
    </div>
    <div id="serv">
      <a href="https://www.blackanthemltd.site/Services">
        <h3>SERVICES</h3>
      </a>
    </div>
    <div id="proj">
      <a href="https://www.blackanthemltd.site/Projects">
        <h3>PROJECTS</h3>
      </a>
    </div>
    <div id="gal">
      <a href="https://www.blackanthemltd.site/Gallery">
        <h3>GALLERY</h3>
      </a>
    </div>
    <div id="raq">
      <a href="https://www.blackanthemltd.site/RAQ">
        <h3>REQUEST A QUOTE</h3>
      </a>
    </div>
  </div>
</header>

Answer 1

I would recommend changing your header to be a flex-box, unless you have a specific reason you need to use grid. The following style changes:

header {
    width: 100%;
    background: #fff;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#ballo, #menus {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

display: flex says that this element will be a flex-container.

flex-direction specifies if we're laying out children in a row or column. your header is a row.

justify-content specifies how the flex-container will allocate space for its children along its main-axis (its main-axis is a row when you specify 'row' for flex-drection and a column when you specific 'column'). space-between will maximize the amount of whitespace between the elements. You might prefer space-around.

align-items specifies how the flex-container will align items along it's opposite axis (whatever the opposite of the axis above is). If you want to place your items roughly in the 'center' vertically of your header, which by your example looks to be the case, then you want a value of 'center' here.

Move the outside of that inner div:

<div id="ballo">
  <img src="images/BAL.png" alt="" id="balloicresize">
  <h2>Black Anthem LTD</h2> 
</div>

The spacing between things like individual menu items will still not be ideal, you can fix that by using a padding value of your choosing.

I would delete or comment out your other css classes temporarily, to see what just the above gets you. Then add stuff as you need it.