Удалить пустое пространство слева и справа от заголовка image

Question

В настоящее время я настраиваю свой блог, и мне сложно форматировать заголовок так, как я планировал.

Here is my site. Как вы можете видеть, их дополнительное пространство по бокам заголовка. Моя цель состояла бы в том, чтобы удалить пространство, чтобы цветовое растение было на одном уровне с полем содержимого или тем, что вы его называете.

Я много раз просматривал CSS своей темы и менял поля, ширину и прокладки на все и все, что возможно связано с изображением заголовка, но не имели нулевой удачи. Их что-то мне не хватает?

Мой блог размещен в Wordpress, а моя родительская тема - из Genesis Framework.

Вот CSS для изображения заголовка:

/* 
Site Header 
--------------------------------------------- */ 

.audrie .site-header { 
    background-position: center; 
    padding:0px 0; 
     width:100%; 
} 

/* Title Area 
--------------------------------------------- */ 

.title-area { 
    padding: 0px 0; 
    margin-bottom: 30px; 
    margin-top: 20px; 
} 

.title-area h1 { 
    margin: 0 auto; 
} 

.title-area p { 
    margin: 0; 
} 

.header-image .title-area { 
    padding: 0; 
     width:100%; 
} 

.site-title, 
.site-title a { 
    font-size: 64px; 
    font-weight: 600; 
    letter-spacing: 8px; 
    line-height: 1.2; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    overflow-wrap: break-word; 
} 

.site-title a, 
.site-title a:hover { 
    color: #747474; 
} 

.site-description { 
    color: #808080; 
    font-family: Lato; 
    font-size: 13px; 
    font-weight: 300; 
    letter-spacing: .5px; 
    margin: 0; 
    text-align: center; 
    text-transform: none; 
} 

/* Full width header, no widgets */ 

.header-full-width .title-area, 
.header-full-width .site-title { 
    width: 100%; 
} 

.header-image .site-description, 
.header-image .site-title a { 
    display: block; 
    text-indent: -9999px; 
} 

/* Logo, hide text */ 

.header-image .site-header { 
    background-position: center !important; 
    background-size: 1000px 200px !important; 
    padding: 0; 
margin-top:-90px; 
padding-bottom:30px; 
} 

.header-image .site-title a { 
    float: none; 
    min-height: 200px; 
    width: 100%; 
} 

/* Widget Area 
--------------------------------------------- */ 

.site-header .widget-area { 
    float: right; 
    text-align: right; 
    width: 720px; 
} 

.header-image .site-header .widget-area { 
    padding: 0px 0; 
} 

.site-header .search-form { 
    float: right; 
    margin-top: 22px; 
} 

Любая помощь или руководство в правильном направлении было бы весьма признателен! Благодаря!

Answer 1

вы могли бы сделать что-то вроде этого:

.site-container{ 
padding: 0 
} 

.header-image .site-header{ 
background-size: 1100px 200px !important; 
} 

.site-inner{ 
padding: 36px; 
} 

может быть какое-то важное необходима, и проверить responsiv-поведение ..

Answer 2

Ваш заголовок (.site-header) имеет фиксированный размер фона от:

background-size: 1000px 200px !important; 

Но ваш .site-container div имеет максимальную ширину 1100px, ведьма делает ваше изображение меньше, чем остальное. Вместо этого, пусть он будет реагировать, как:

background-size: 100% auto !important; 
/*Assuming you have a reason for "!important" */ 

Answer 3

.site-container имеет 36px горизонтальные отступы, который вызывает пробелы вокруг вашего заголовка. Если добавить:

.site-container { 
    padding-left: 0; 
    padding-right: 0; 
} 

ваш горизонтальный пробел исчезнет, ​​но вам также необходимо добавить:

header { 
    background-size: 1100px 200px !important 
} 

, чтобы получить первое изображение, чтобы охватить всю ширину.

Наконец, чтобы очистить его, я хотел бы добавить:

.site-inner{ 
    padding-left: 36px; 
    padding-right: 36px; 
} 

так что ваш текст имеет некоторую комнату по бокам.