Hello, I am a newcomer in the world of WordPress website design and I have been struggling with a minor CSS issue on my site (www.dimjaa.org) for the past couple of days. Despite my efforts, I have been unable to find a solution on my own. I am reaching out to seek help from experienced individuals like yourself in order to resolve this matter and gain insight into its root cause. I am currently using the evolve theme and have added header widgets to my site. The content within the header widget area consists of Login and Logout links which I wish to display at the top-right of the widget area. Two primary issues that I am encountering are:
- The background color of the header-block housing the widget area cannot be changed, or the widget area does not completely cover the header-block due to margins on both sides.
- Placement of the Login and Logout links at the top-right of the area proves challenging, as they cannot be vertically centered. Interestingly, removing the float: right property enables vertical centering. Below is an excerpt of my HTML and CSS code:
.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;
}
I have provided a link to an image showcasing the unnecessary padding on both sides of the header block. I am hopeful that experts can provide me with a solution to address these challenges and enhance my understanding of the issue at hand.