protfolio有点懵

我的思路：标题 文字 导航从上往下来，设置居中 margin上下给外边距，左右atuo，最后跟一个图宽度占满屏幕，但是网页没有效果。

我的问题1：写这一部分时候感觉脑子很乱，很多元素在乱加，实际效果图相当于没有任何效果，请问应该怎么样的思路。

我的问题 2：什么时候需要上来先设置一下div比如这里的

.protfolio{

height: 800px;

width: 100%;

}我就不知道该不该这样设置一下，再去写其他细节的h1，p.....

我的问题3：后面的图片是在html里面添加还是在css中background-image: url添加，在banner部分是css添加，但是考虑到这样是添加的整个背景图，而portfolio中图片只占了一半，不算是背景图吧？我就在html里面添加了，不知道对不对。请问应该怎么判断这种情况。

CSS代码

/*protfolio*/

.protfolio{

height: 800px;

width: 100%;

}

.profolio > h1{

font-size: 48px;

text-align: center;

margin: 50px auto 30px;

}

.profolio > p{

font-size: 14px;

text-align: center;

margin-top: 0px auto 30px;

.profolio > nav > a{

font-size: 22px;

color: #f46208;

text-align: center;

text-decoration: none;

padding: 5px 10px;

margin-right: 15px;

}

.profolio > nav > a:hover{

background-color: #f46208;

color: #fff;

}

.portfolio > nav > a:nth-child(1) { 

border: 1px solid #f46208; 

}

.portfolio > nav > a:nth-child(2) { 

border: 1px solid #f46208; 

}

.portfolio > nav > a:nth-child(3) { 

 border: 1px solid #f46208; 

}

.portfolio > nav > a:nth-child(4) {

border: 1px solid #f46208; 

}

.portfolio > nav > a:nth-child(5) {  

border: 1px solid #f46208; 

}

HTML代码

<!--portfolio-->

<section class="portfolio">

<h1>Protfolio</h1>

<p>Only know you've been high when you're feeling low,Only hate the road when you're missing home,Only know you love her when you let her go</p>

<nav>

<a href="#">Summertrain</a>

<a href="#">Outside</a>

<a href="#">Liekkas</a>

<a href="#">I Just Wanna Run</a>

<a href="#">Lost Stars</a>

</nav>

<img src="img/portfolio-nav-img.jpg">

</section>