Gaps on the left and right side of sections

HTML-CSS
1

I have a couple of questions that needs solutions …

  1. how do i remove the gaps on the welcome section/ or when gas appear when you add background color?
    image: image
  2. What does 100vh actually do? I get it means 100%, but whats the point of it?
  3. how do i make the project section turn into rows?
    Here is the link: https://codepen.io/nianaz/pen/gORLOVL?editors=1100
2

It would be helpful if you provided a link.

3

sorry, I accidentally sent it by accident, I have provided the link

4

You should start with this basic css reset.

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

That should fix your gap issue on the side.

Also, I am moving this back to the html section since this is an html and css project :grinning:

5

As for your other questions, 100vh is 100% of the viewport height.

This stackoverflow answer explains it in more detail

For the projects being in a row, flexbox would be a good choice.

6

Thanks alot it worked, both of your solutions worked with me:)
But is there a solution for question 3…
I want my project images to be in rows instead of columns similar to what freecodecamp did to theirs in the exemplar.

7

Did you read this part of my response?

Did you try that?

8

seems like i did not see it,
but I tried that method, it did not work…
this is how it turned out: https://codepen.io/nianaz/pen/gORLOVL

9

Edit:
For your projects section, I would use flex-wrap, so it is responsive for mobile.

#projects {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

For your project images I would set a width and height so they are all the same.
You can create a class for the images.

Then I would place each project inside a div so they would all be side by side.

It looks like the FCC sample used grid which works to.

I guess it boils down to which one you feel more comfortable with.

There are few ways to create the outcome you are looking for.

Hope that helps!

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.