Unable to center things using CSS - html

Question

I'm doing a diploma in digital media so I'm really new to coding and I've gotten stuck on one particular bit. I need to center and drop down some stuff, but despite all of my searches and trying all of the solutions I've found, nothing seems to have worked, so now I'm caving and asking for help. How do I get this:
body {
background-color: rgb(153, 145, 122);
}
.grey {
background-color: black;
color: white;
width: 100%;
overflow: hidden
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: right;
border-left: 1px solid white
}
li a {
display: block;
padding: 8px;
background-color: black;
}
li h1 {
display: block;
padding: 8px;
background-color: black;
}
.floating {
float: left;
display: block;
border-left: none
}
li a:hover {
background-color: grey;
}
p {
width: 50%;
word-break: break-all;
text-align: center
}
body {
background: url("file:///C:/Users/clark/Documents/CSS/Photography Masters Website - Existing/Pm-logo.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.buttonHolder {
text-align: center
}
.button {
width: 250px;
height: 50px;
margin: 0 auto;
padding: 0;
display: inline-block;
line-height: 50px;
text-align: center;
}
<header class="grey">
<ul class="navbar">
<li class="floating"><a>Photography Masters</a></li>
<li> Link 1</li>
<li> Link 2</li>
<li> Link 3</li>
<li> Link 4</li>
</ul>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam magna erat, mollis nec rutrum in, hendrerit consectetur justo. Cras dictum facilisis nibh, eu tincidunt nisi. Vivamus facilisis vitae dolor eu sodales. Nunc imperdiet ex quis laoreet euismod.
Duis vitae feugiat neque, eu viverra mauris. Mauris convallis sodales velit, at rhoncus odio.
</p>
<div class="buttonHolder">
<input class=button type="submit" value="See More">
</div>
To look something like this:
https://i.stack.imgur.com/CyrlY.png
All elements have to be able to resize for different screen resolutions, please tell me what I'm doing wrong.

Answer 1

Just add margin: auto; to your p element:
p {
width: 50%;
margin: auto;
word-break: break-all;
text-align: center
}
Take 5 mins to read the following will help a lot
REF: https://www.w3.org/Style/Examples/007/center.en.html
body {
background-color: rgb(153, 145, 122);
}
.grey {
background-color: black;
color: white;
width: 100%;
overflow: hidden
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: right;
border-left: 1px solid white
}
li a {
display: block;
padding: 8px;
background-color: black;
}
li h1 {
display: block;
padding: 8px;
background-color: black;
}
.floating {
float: left;
display: block;
border-left: none
}
li a:hover {
background-color: grey;
}
p {
width: 50%;
margin: auto;
word-break: break-all;
text-align: center
}
body {
background: url("file:///C:/Users/clark/Documents/CSS/Photography Masters Website - Existing/Pm-logo.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.buttonHolder {
text-align: center
}
.button {
width: 250px;
height: 50px;
margin: 0 auto;
padding: 0;
display: inline-block;
line-height: 50px;
text-align: center;
}
<header class="grey">
<ul class="navbar">
<li class="floating"><a>Photography Masters</a></li>
<li> Link 1</li>
<li> Link 2</li>
<li> Link 3</li>
<li> Link 4</li>
</ul>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam magna erat, mollis nec rutrum in, hendrerit consectetur justo. Cras dictum facilisis nibh, eu tincidunt nisi. Vivamus facilisis vitae dolor eu sodales. Nunc imperdiet ex quis laoreet euismod.
Duis vitae feugiat neque, eu viverra mauris. Mauris convallis sodales velit, at rhoncus odio.
</p>
<div class="buttonHolder">
<input class=button type="submit" value="See More">
</div>