JavaScript by Example

Content area

The navigation bar occupies a fixed position on top of the screen. Hence, it will overlap with the page's content. Open up styles.css and add the following code:

body {  padding-top: 65px;}

This will add padding to the entire body section so that the navbar will not overlap with our content. Now, we need to convert our primary content area div.body to a flexbox:

.body {  display: flex;  flex-direction: row;  flex-wrap: wrap;  justify-content: space-around;}

This will convert our div.body element into a flexbox that organizes its contents as a row (flex-direction) and wraps the contents to new rows if space is not available for entire rows (flex-wrap). Also, the contents will be surrounded by equal margin spaces horizontally (