Trying to centre main banner with responsive text aligned left - html

Question

I'm trying to centre my banner img that is right underneath the nav bar. I want to put text on it aligned left.
I've been able to do that BUT the text on the image is not responsive at all. How do I make it so that the text changes size when browser changes size? Also, I think my CSS is all over the place so if you have any advice on that it would be much appreciated!
Here is the markup:
.topimage img {
position: relative;
width: 100%;
padding-top: 10px;
}
li {
list-style-type: none;
}
h1 {
z-index: 100;
position: absolute;
color: #272727;
font-size: 45px;
font-weight: normal;
left: 650px;
top: 250px;
font-family: Helvetica Neue, arial, serif;
}
.maintitle p {
z-index: 100;
position: absolute;
color: #272727;
font-size: 17px;
font-weight: normal;
left: 650px;
top: 390px;
font-family: Helvetica Neue, arial, serif;
}
.maintitle ul {
list-style-type: none;
}
a {
text-decoration: none;
}
.maintitle li {
z-index: 100;
position: absolute;
color: #272727;
font-size: 15px;
font-weight: bold;
left: 650px;
top: 470px;
font-family: Helvetica Neue, arial, serif;
border-style: solid;
border-width: medium;
border-color: #272727;
border-radius: 6px;
padding: 6px;
}
a:visited {
text-decoration: none;
color: #272727;
}
.maintitle a:hover {
background-color: #6db618;
border-color: #6db618;
color: white;
}
.maintitle li:hover {
background-color: #6db618;
border-color: #6db618;
color: white;
}
<div class="topimage">
<img alt="plant" src="images/main.png" />
</div>
<div class="maintitle">
<h1>Marketing Communications & <br> Digital Design</h1>
<p>Marketing enthusiast who has also ventured into the digital design world. Combining <br> strategy with creativity is essential in my books!</p>
<ul>
<li class="aboutme"><a id="aboutmelink" href="#about">My Story</a></li>
</ul>
</div>
This is what I'm trying to achieve:
enter image description here

Answer 1

There are several issues here. Yet, the most important is your use of absolute positioning. It's completely unnecessary. All you really need to do is use a margin of auto to center the elements.
In this case, instead of positioning h1, p and ul separately, we can move them into a wrapper element.
If you want to shrink the actual font size according to screen width, use something along the lines of font-size: 10vw;
.wrap{
margin: 200px auto 0;
min-width: 320px;
max-width: 500px;
}
.topimage img {
position: relative;
width: 100%;
padding-top: 10px;
}
li {
list-style-type: none;
}
h1 {
z-index: 100;
color: #272727;
font-size: 45px;
font-weight: normal;
top: 250px;
font-family: Helvetica Neue, arial, serif;
}
.maintitle p {
z-index: 100;
color: #272727;
font-size: 17px;
font-weight: normal;
top: 390px;
font-family: Helvetica Neue, arial, serif;
}
.maintitle ul {
list-style-type: none;
padding: 0;
}
a {
text-decoration: none;
}
.maintitle li {
z-index: 100;
color: #272727;
font-size: 15px;
font-weight: bold;
font-family: Helvetica Neue, arial, serif;
border-style: solid;
border-width: medium;
border-color: #272727;
border-radius: 6px;
padding: 6px;
}
a:visited {
text-decoration: none;
color: #272727;
}
.maintitle a:hover {
background-color: #6db618;
border-color: #6db618;
color: white;
}
.maintitle li:hover {
background-color: #6db618;
border-color: #6db618;
color: white;
}
<div class="topimage">
<img alt="plant" src="images/main.png" />
</div>
<div class="maintitle">
<div class="wrap">
<h1>Marketing Communications & <br> Digital Design</h1>
<p>Marketing enthusiast who has also ventured into the digital design world. Combining <br> strategy with creativity is essential in my books!</p>
<ul>
<li class="aboutme"><a id="aboutmelink" href="#about">My Story</a></li>
</ul>
</div>
</div>

Answer 2

* {
box-sizing: border-box;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #272727;
}
body {
font-family: Helvetica Neue, arial, serif;
}
.container {
max-width: 1024px;
width: 100%;
margin: 0 auto;
padding: 0 2%;
}
.topimage img {
position: relative;
width: 100%;
padding-top: 10px;
}
.maintitle h1 {
position: relative;
color: #272727;
font-size: 8vw;
}
.maintitle p {
z-index: 100;
position: relative;
color: #272727;
font-size: 4vw;
font-weight: normal;
}
.maintitle ul li {
z-index: 100;
position: relative;
color: #272727;
font-size: 15px;
font-weight: bold;
border-style: solid;
border-color: #272727;
border-radius: 6px;
padding: 6px;
}
.maintitle ul li:hover {
background-color: #6db618;
border-color: #6db618;
color: white;
}
<div class="container">
<div class="topimage">
<img alt="plant" src="images/main.png" />
</div>
<div class="maintitle">
<h1>Marketing Communications &<br>Digital Design</h1>
<p>Marketing enthusiast who has also ventured into the digital design world. Combining <br> strategy with creativity is essential in my books!</p>
<ul>
<li class="aboutme"><a id="aboutmelink" href="#about">My Story</a></li>
</ul>
</div>
</div>

Answer 3

I might have understand it wrong, but if you want to have a background image with text over it, you can use a background-image in CSS.
<div class="banner">
<div class="maintitle">
<h1>Marketing Communications & <br> Digital Design</h1>
<p>Marketing enthusiast who has also ventured into the digital design
world. Combining <br> strategy with creativity is essential in my books!</p>
<ul>
<li class="aboutme"><a id="aboutmelink" href="#about">My Story</a></li>
</ul>
</div>
</div>
And then the CSS
.banner {
background-image:url('images/main.jpg');
background-position:center;
position: relative;
width: 100%;
padding-top: 10px;
}
.maintitle {
width:100%;
blahblahblah
... }