Please assist: the top two horizontal sections in my personal portfolio project are not aligning


Please could someone assist me? In order to pass the 11th test in my personal portfolio project(which is: The height of the welcome section should be equal to the height of the viewport.) I added the following CSS code to my welcome-text section (also the secondpane class in the CSS).:

padding-top: 0px;
  margin-top: 0px;
  display: block;
  height: 100vh;

The problem is that my webpage is divided into four horizontal sections of different heights and colours. However, in order to ensure that the second section(the welcome section/secondpane) is aligned to the first section/firstpane (i.e has no gap/space between the two), I set the margin-top of the second section to : 230px. But the issue is that the code above that I used to pass the 11th test, sets the margin-top to 0, thus overwritng the 230px, so while passing the test, a gap or blank space is left between those first two sections.

So I wish to ask if anyone knows how I can get that gap to disappear (i.e get the two sections to align side by side) whilst still keeping the margin-top setting of 0 for the second section and thus passing the 11th test for the project. Here’s the link to my project:

Thanks in anticipation.


Something like this?

 margin: 0;
 padding: 0;

hi @obij

you may need to fix your css, as it have some properties repeated. as an example your .secondpane

  width: 100%;
  height:570px;  /*<-- height */
  padding-top: 230px;  /*<-- padding top */
  border-collapse: collapse;
  padding-top: 0px;  /*<-- padding top*/
  margin-top: 0px;
  display: block;
  height: 100vh;  /*<-- height */