Hello! Trying to wrap my head around an issue I have in my very basic css that I’m editing from an existing Wordpress (child) theme. I’m currently making it so the grid of latest posts covers all of the page (no gaps in the grid), and the sticky header to do the same (stretch across the page), but there are some gaps in these elements that refuse to go away. Have tried in all ways to change the width of every single class in the whole stylesheet to 100% or adding and removing classes and id’s until infinity without success. Long answer would be to script my own webpage from scratch but I’m under time pressure and want a short answer as to why I can’t make these simple changes to the page. I have no plugins installed. This is an image of the page (a bit scrolled down to highlight the header issue + the small white gap on right side) for further comprehension(link): https://www.photobox.co.uk/my/photo/full?photo_id=500395553296. This is the code i added/edited in the stylesheet of my WP child theme (Draft Portfolio);
#masthead {
background-color: white;
position: fixed;
z-index: 100;
padding: 15px;
left: 0px;
right: 0px;
width: 100%; /*CORRECTING GAP ON RIGHT SIDE AFTER HAVING EDITED POSITION OF POSTS DIV*/
#cssmenu {
background: transparent;
margin: 0;
width: 100%; /*ELSA*/
padding: 0;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
#cssmenu ul li a:after {
content: '';
display: block;
height: 2px;
width: 100%; /*ELSA 0*/
margin: 10px 0 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
#cssmenu ul li a:after {
content: '';
display: block;
height: 2px;
width: 100%; /*ELSA 0*/
margin: 10px 0 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
#cssmenu ul li a:hover:after {
width: 100%;
background: #bb9d56;
}}
#cssmenu {
background: transparent;
margin: 0;
width: 100%; /*ELSA*/
padding: 0;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
#cssmenu ul li a:after {
content: '';
display: block;
height: 2px;
width: 100%; /*ELSA 0*/
margin: 10px 0 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
#cssmenu ul li ul li a {
font-size: 14px;
font-weight: 400;
text-transform: none;
color: #000000;
letter-spacing: 0;
display: block;
width: 100%; /*ELSA*/
padding: 11px 10px 11px 20px;
text-align: left;
}
#cssmenu>ul>li.has-sub>a:before {
display: block;
content: '';
border: 4px solid transparent;
border-top-color: #bb9d56;
z-index: 2;
height: 0;
width: 100%; /*ELSA O*/
position: absolute;
right: 16px;
top: 21px;
}
@media all and (max-width: 100%),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 100%),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 100%),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 100%),
only screen and (min-device-pixel-ratio: 2) and (max-width: 100%),
only screen and (min-resolution: 192dpi) and (max-width: 100%),
only screen and (min-resolution: 2dppx) and (max-width: 100%) /*ELSA 1024PX*/
.site-branding {
float: left;
width: auto;
max-width: 100%; /*ELSA 250PX*/
}
.content-area {
width: 100%;
max-width: none;
margin-top: 70px;
position:absolute;
left:0;
right:0;
margin-right: 0px;
}
.hentry {
padding: 0%;
margin: 0px;
}
All help appreciated!
