Header Block and Widget area content

Question

I am a newbie and designing a Wordpress website (www.dimjaa.org). I am sticking to a minor css problem for last two days but failed to find out the solution. I want to take help from you to solve it and also eager to know root of the cause. I am using evolve themme. I added header widgets. Content of the header widget area are Login and Logout links. I want to display these at the top-right of the widget area.Image of the header-block showing unnecessary padding on both sides Two problems that I am facing now are : 1. Background-color of the header-block which holds the widget area can not be changed. Or the header-block can not be covered by the widget area completely (it takes margin in left and right). The header-block can not be targeted properly. Any one of the above may be considered as solution of the issue. 2. Moreover the Login and Logout links can not be placed on the top-right of the area. Even can not be vertically centered. Interestingly when I remove the float: right; then it can be vertically centered. My html and css as below:

   .header-block{
	background-color: red;
    }
    .header-widgets{
	background-color: #CDAE02;
    }
    .user-log a{
	float: right;
	text-decoration: none;
	background-color:#581845;
	color: #ddd;
	border-radius: 15px;
	font-size: 14px;
	margin-right: 1em;
    }
    .user-log a:first-child{
	  padding: 4px 13px;
    }
    .user-log a:last-child{
	padding: 4px 8px;
    }
    .user-log a:hover {
	background-color:#B12307;
	font-size: 15px;
    }

    <ul class="user-log">
	<a href="#">Login</a>
	<a href="#">Logout</a>
    </ul>

I expect a solution from the experts and also hope to gather knowledge for understanding the issue better.

ArdaTahsinAyar ArdaTahsinAyar · Accepted Answer · 2018-09-09T07:56:23

container is a class used by Bootstrap, so you can force that class to have width 100% by using !important in your rule, or you can define a new class called container-full and replace it with the container class:

.container-full{
    margin: 0 auto;
    width: 100%;
}

Also, changing the color of header-block won't affect, since it has other children that have other colors and has no space to show the color in the background. You may change the header-widgets' color. And it seems like you have padding and margin rules already defined in .widget-content & .header-widgets classes. You either have to change these rules in style.css, or write new rules that contain !important command in the end of the rules, so you can force them to affect the rules.

Header Block and Widget area content

1 Answers