CSS for Front-end Interviews/

...

/

Solution Review: CSS Intermediate Challenge

Solution Review: CSS Intermediate Challenge

The solution to the responsiveness challenge based on the intermediate level CSS is discussed in this lesson.

We'll cover the following...

Solution review: Responsive navbar

Let’s have a look at the solution first:

Explanation

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

All the elements must have a border-box around them so that the padding and border are included in an element’s total width and height. The default margin and padding of all the elements are set to 0 because we want to add our custom values.

#navbar {
  background: #4c6ca4;
  overflow: hidden;
  padding: 0 2rem;
}

The background color is set to ...