el problema es que al poner display:block; al boton1 se aumenta su ancho no se porque ocurre eso le quiero agregar display block porque no puedo ponerle margin-top al botón porque no ocurre nada al ponerlo tengo que estar poniéndole una clase al texto para ponerle un margin bottom para así darle ese espacio que tiene y no quiero que este asi ayuda por favor(el Botón se ubica en el comentario galería se llama boton1)
este es mi codigo de css:
https://mega.nz/#!x3RlgSBQ!U-TAqmJgrEbAlVb8pZJBd30nERKFQotVLG4_bYrrbes
este es mi codigo de html:
https://mega.nz/#!Yr5ynASA!IYMVuXkrJlCXaNL8RNz7doCY2saSpdCL3_2HMiNnORY
les dejo el enlace mega porque no me pone bien lo que es html y css
body {
font-family: 'arial', sans-serif;
font-size: 14px;
color: #666666;
line-height: 1.8em;
font-weight: 400;
background: #ffffff;
}
/*GALERIA*/
.textodegaleria{
margin-bottom: 20px;
}
.galeria{
position:relative;
width: 1366px;
background-color: transparent;
}
.boton1{
margin-top: 20px;
text-decoration: none;
padding: 10px 30px;
line-height: 24px;
text-transform: uppercase;
background-color: #fb4043;
color: #ffffff;
border: 2px solid #fb4043;
font-size: 13px;
font-weight: 600;
border-radius: 2px;
}
.boton1:hover{
background-color: #ffffff;
color: #fb4043
}
.textoyboton{
width: 572px;
top: 160px;
margin-left: 100px;
}
.imagen1{
width: 100%;
position: relative;
bottom: 15px;
right: 8px;
}
.titulo-de-div{
font-size: 36px;
color: #46a5e5;
font-weight: 700;
text-transform: uppercase;
}
<div class="galeria">
<img class="imagen1" src="imagenes/div1.jpg">
<div class="textoyboton">
<h2 class="titulo-de-div">health and wellbeing</h2>
<p class="textodegaleria">Liberal,cocollaborative consumptionfluctuation social analysis,<br>
rural United Nations outcomesfoundation deep engagement.
</p>
<a class="boton1" href="">LEARN MORE</a>
</div>