Why are these gaps refusing to leave?

Community Off Topic
#1

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!

#2

Your screen shot isn’t coming up, only be redirected to the home page of the site. Try uploading a screen shot in a reply to this topic.

It would be advisable to restore the orginal stylesheet to what it was out of the box and create a separate custom style sheet that loads AFTER the base styles. That way your work is separate from the theme.

1 Like
#3

Hi! Thanks for the reply! I thought about doing it the way you just described, but then it would be more difficult for me to see what code I’ve overwritten? Also, sorry about the screenshot not appearing. I uploaded this in a hurry. Here’s another one:

screengrab
screengrab1280×604 211 KB

#4

Your content is slipping under the header. Try increasing margin-top by 15px.

#5

Cool, I will. But what do you reckon i should do about the gaps on each side of the header? They simply won’t go away.

#6

When I add for example margin-left, the gap on the right side gets bigger and vice versa.