This a page that (hopefully) in time will grow to cover the basic and simple HTML and CSS solutions.
Please add to your alternate solutions if you know a different way.
## Making a `<hr>` horizontal rule smaller
```css
hr {
width: 75%;
margin-left: auto;
margin-right: auto;
}
```
## Giving a `<div>` non scrolling background
```css
#divName {
padding-top: 50px;
height: 500px;
color: #fff;
background-image: url("your_url.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
```
Try different values to see the how it affects the div and over in the html
```html
<divid="divName"class="container-fluid">
```
## Vertical alignment (for one line of text)
This can be of use in a CSS navigation menu. The key is to make the height of the menu and the line-height of the text the same.
```css
.nav li{
line-height:50px;
height:50px;
}
```
More neat tricks <ahref ="https://www.webdesignerdepot.com/2016/10/20-essential-css-tricks-every-designer-should-know/"target ='_blank'rel='nofollow'>can be found here</a>