Блог

Вот мой html-файл:

 <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>
 

и 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;
}
 

это результат, который я получаю:
изображение нежелательного вывода, которое я получаю

Я не знаю, почему между двумя родительскими разделителями под тегом заголовка #fsect и #меню есть пробел, и содержимое также не может быть правильно распределено. Пожалуйста, помогите мне решить эту проблему, я перепробовал все, что знаю. Независимо от того, что я пытаюсь, пространство между двумя дивами просто не исчезает, и содержимое также остается сжатым вместе. HTML правильно отрисован, это css, который работает не так, как я хочу. Вот как я хочу, чтобы заголовок был расположен: заголовок этой картинки-это дизайн, который я хочу получить на своем css

Пожалуйста, помогите!

Я бы рекомендовал изменить ваш заголовок на гибкий, если у вас нет особых причин использовать сетку. Следующие изменения стиля:

 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 говорит, что этот элемент будет гибким контейнером.

flex-direction указывает, размещаем ли мы детей в строке или столбце. ваш заголовок-это строка.

justify-content указывает, как гибкий контейнер будет выделять пространство для своих дочерних элементов вдоль своей главной оси (его главной осью является строка, если вы указываете «строка» для flex-drection , и столбец, если вы указываете «столбец»). space-between позволит максимально увеличить количество пробелов между элементами. Вы могли бы предпочесть space-around .

align-items указывает, как flex-контейнер будет выравнивать элементы по противоположной оси (независимо от того, что противоположно оси выше). Если вы хотите разместить свои элементы примерно в «центре» по вертикали вашего заголовка, как это выглядит на вашем примере, то вам нужно значение «центр» здесь.

Переместите внешнюю часть этого внутреннего div:

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

Расстояние между такими вещами, как отдельные пункты меню, все равно не будет идеальным, вы можете исправить это, используя значение отступа по вашему выбору.

Я бы временно удалил или прокомментировал ваши другие классы css, чтобы посмотреть, что вы получите только из вышеперечисленного. Затем добавляйте материал по мере необходимости.