Create html layout similar to android - html

Question

I have a WebView that displays a html layout. But the problem is the html layout isn't coming out how I expected it. I created a Android layout using xml but I want the layout in html. this is what i am trying trying achieve
The grey part represents a background image.
The purple part a image(Logo).
Then I have a white box with round corners and TextView and Button inside. this is done in android xml but i want something similar in html
This is how it looks in html
But as you can see the logo is behind the white box and the TextView is next to the button instead of the top.
here is my html code
<style>
div {
padding: 10px 10px;
background: #fff;
width: 300px;
border-radius: 10px;
margin : 0 auto;
}
body {
background-image: url("url to background image");
//background-size: cover;
}
.logo {
background-image: url("url to logo");
background-size: cover;
height: 70px;
width: 200px;
margin-bottom 40;
background-color: rgba(0, 0, 0, 0);
}
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
background-color: rgba(0, 0, 0, 0);
}
.helper {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0);
}
.content {
#position: relative;
#top: -50%;
margin: 0 auto;
width: 200px;
}
.button {
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<div class="container">
<div class="helper">
<div class="logo"/>
<div class="content">
<p1>Text </p1>
<input type="submit" class="button" value="Button">
</div>
</div>
</div>
Can someone please help me fix my html code to look like the android xml version

Answer 1

Change <p1>Text </p1> to <p>Text </p>.
A p element has the style display:block; by default and will push the button down.