CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 3368

Link exceeding width of container

I am running into an issue that has stumped me. I searched all over for an answer, but could not find one.

I have a container that I am making directly out of an <a> tag. Originally, my issue was that the clickable linked area exceeded outside of the border. I then removed display: block from .bigButtonLink. This resolved this issue, but then two other issues appeared. 1. The link container is not centered anymore. 2. The margin under the link is not rendering.

Does anyone see what I am doing wrong?

.sec {
	margin: 60px auto;
}
.bigButtonLink {
	text-decoration: none;
	/*display: block;*/
	text-align: center;
	margin: 50px auto;
}
.bigButton {
	border: 1px solid #BE1E2D;
	-webkit-appearance: none;
	border-radius: 2px;
	box-sizing: border-box;
	background: #FFF;
	font-family: 'Muli', sans-serif;
	color: #B82222;	
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid #B82222;
	font-size: 2.3rem;
	padding: 3rem 6rem 3rem 4.5rem;
}
#red {
  background: red;
  height: 200px;
  width: 100%;
}  
<div class="sec">
  <a href="#" class="bigButtonLink bigButton">
	  Request Quote 
  </a>
</div>
<div class="sec" id="red">
</div>

Upvotes: 2

Views: 644

Answers (2)

Aryan Twanju
Aryan Twanju

Reputation: 2516

You have to add text-align: center' to the selector.secanddisplay: inline-blockto.bigButtonLink`. Try this code.

.sec {
    margin: 60px auto;
  text-align: center;
}
.bigButtonLink {
    text-decoration: none;
    text-align: center;
    margin: 50px auto;
  display: inline-block;
}

Upvotes: 0

user7236046
user7236046

Reputation:

Add text-align: center; to the section class and make the a selector display: inline-block; and that should center it and maintain the margin around the element as well.

.sec {
	margin: 60px auto;
    text-align: center;
}
.bigButtonLink {
	text-decoration: none;
	display: inline-block;
	text-align: center;
	margin: 50px auto;
}
.bigButton {
	border: 1px solid #BE1E2D;
	-webkit-appearance: none;
	border-radius: 2px;
	box-sizing: border-box;
	background: #FFF;
	font-family: 'Muli', sans-serif;
	color: #B82222;	
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid #B82222;
	font-size: 2.3rem;
	padding: 3rem 6rem 3rem 4.5rem;
}
#red {
  background: red;
  height: 200px;
  width: 100%;
}  
<div class="sec">
  <a href="#" class="bigButtonLink bigButton">
	  Request Quote 
  </a>
</div>
<div class="sec" id="red">
</div>

Upvotes: 3

Related Questions