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

1

Hi,

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: https://codepen.io/obij/pen/gOayOxe

Thanks in anticipation.

2

Hey,

Something like this?

*{
 margin: 0;
 padding: 0;
}
3

hi @obij

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

.secondpane{
  width: 100%;
  height:570px;  /*<-- height */
  padding-top: 230px;  /*<-- padding top */
  background-color:#fcba03;
  border-collapse: collapse;
  padding-top: 0px;  /*<-- padding top*/
  margin-top: 0px;
  display: block;
  height: 100vh;  /*<-- height */